.landing,
.contrast-landing {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--section-max-width);
  margin: auto;
  min-height: 55vh;
}

.introduction,
.contrast-introduction {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--section-max-width);
  margin: auto;
  gap: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

.banner__container {
  width: 100%;
  padding: 0rem var(--section-padding-x);
}

.banner {
  width: 100%;
  /* box-shadow: 0rem 0rem 0.5rem 0rem rgba(0, 0, 0, 0.1); */
  padding: 3rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  color: white;
  gap: 4rem;
  /* background-color: var(--color-primary-700); */
  background: linear-gradient(
      to bottom,
      var(--button-solid-primary),
      var(--button-solid-primary)
    ),
    url("/banner-background.svg");
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  border-radius: var(--corner-radius-s);
}

.contrast-introduction .banner {
  background: var(--contrast-background-color);
  border: var(--contrast-container-border);
}

.banner__header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  color: white;
}

.banner__title {
  font-size: var(--font-size-5xl);
  font-weight: 500;
}

.banner__bubble {
  padding: 0.4rem;
  width: fit-content;
  border-radius: 2rem;
  background-color: var(--banner-button-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 
.banner__bubble.left-sided {
  transform: translateX(calc(-1 * var(--section-padding-y)));
  border-radius: 0rem var(--corner-radius-s) var(--corner-radius-s) 0rem;
  padding-left: var(--section-padding-y);
}
*/

.banner__bubble.right {
  align-self: flex-end;
}

.banner__description {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.banner__description p {
  padding: 1rem 1.5rem;
  width: fit-content;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: var(--font-size-2xl);
}

.banner__description p:first-of-type {
  background-color: var(--banner-description-primary-background);
  color: var(--banner-description-primary-color);
}

.banner__description p:nth-of-type(2) {
  align-self: flex-end;
  background-color: var(--banner-description-secondary-background);
  color: var(--banner-description-secondary-color);
}

.banner .gov-button .element,
.banner .gov-button,
.calc-tool .gov-button .element,
.calc-tool .gov-button {
  border-radius: 10rem !important;
}

.banner__footer {
  display: flex;
}

.agendas {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: var(--section-padding-y) var(--section-padding-x) 2.5rem
    var(--section-padding-x);
}

.agendas h2 {
  font-size: var(--font-size-3xl);
}

.agendas p {
  max-width: 57rem;
  font-size: var(--font-size-l);
  line-height: var(--height-line-l);
  white-space: pre-wrap;
}

/* .banner__footer .gov-button {
  border-color: white !important;
} */

/* .banner__footer .gov-button .element {
  color: white !important;
} */

/* .banner__footer .gov-button {
  min-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  border-color: white !important;
} */

/* .banner__footer .gov-button,
.banner__footer .gov-button .element {
  background-color: var(--color-secondary-600);
  transition: background-color 0.2s;
}

.banner__footer .gov-button:hover,
.banner__footer .gov-button:hover .element {
  background-color: var(--color-secondary-700) !important;
} */

.calc-tool {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0rem var(--section-padding-x);
}

.calc-tool__container {
  display: flex;
  flex-direction: column;
  background: linear-gradient(
      to bottom,
      var(--button-solid-secondary),
      var(--button-solid-secondary)
    ),
    url("/banner-background.svg");
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  padding: 3rem 2rem 2rem 2rem;
  gap: 1rem;
  border-radius: var(--corner-radius-s);
}

.calc-tool__title {
  font-size: var(--font-size-5xl);
  font-weight: 500;
  color: white;
}

.calc-tool__description {
  font-size: var(--font-size-2xl);
  color: white;
}

.calc-tool__description.right {
  text-align: end;
}

.calc-tool__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* .calc-tool__content .gov-button {
  background-color: var(--color-primary-200) !important;
}

.calc-tool__content .gov-button:hover {
  background-color: var(--color-primary-600) !important;
}

.calc-tool__content .gov-button .element {
  color: var(--color-secondary-700) !important;
}

.calc-tool__content .gov-button:hover .element {
  color: white !important;
} */

/* .calc-tool__button .gov-button .element {
  min-width: 100% !important;
} */

/* .calc-tool__button .gov-button {
  min-width: 50% !important;
  display: flex !important;
  justify-content: center !important;
} */

/* .calc-tool .gov-button .element {
  color: white !important;
} */

.introduction .gov-dialog__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 65rem) {
  .banner__container {
    padding: 0rem;
  }
  .banner {
    border-radius: 0rem;
  }
}

@media (max-width: 49rem) {
  .banner {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
  }
  .banner__title {
    font-size: var(--font-size-4xl);
  }
  .calc-tool__title {
    font-size: var(--font-size-4xl);
  }
  .banner {
    gap: 2rem;
  }
  .calc-tool__container {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
  }
  /* .banner__title {
    font-size: var(--font-size-4xl);
  }
  .calc-tool__title {
    font-size: var(--font-size-3xl);
  } */
  .banner__description p {
    font-size: var(--font-size-xl);
    line-height: var(--height-line-xl);
  }
  .calc-tool__description {
    font-size: var(--font-size-xl);
    color: white;
  }
}

@media (max-width: 42rem) {
  .banner__title {
    font-size: var(--font-size-3xl);
  }
  .calc-tool__title {
    font-size: var(--font-size-3xl);
  }
  .calc-tool__description {
    font-size: var(--font-size-xl);
    color: white;
  }
  .banner__bubble p {
    font-size: var(--font-size-xl);
  }
}

@media (max-width: 34rem) {
  .banner__title {
    font-size: var(--font-size-2xl);
  }
  .calc-tool__title {
    font-size: var(--font-size-2xl);
  }
  .banner__bubble p {
    font-size: var(--font-size-l);
  }
  .calc-tool__container {
    padding: 2.5rem 1rem 1rem 1rem;
  }
}

@media (max-width: 24rem) {
  .banner {
    padding-top: 2rem;
  }
  .calc-tool__container {
    padding-top: 2rem;
  }
  .banner__title {
    font-size: var(--font-size-xl);
  }
  .calc-tool__title {
    font-size: var(--font-size-xl);
  }
  .calc-tool__description {
    font-size: var(--font-size-s);
    color: white;
  }
  .banner__bubble p {
    font-size: var(--font-size-s);
  }
}