.hero.hero header {
  flex-direction: column;
  display: flex;
}
@media (min-width: 728px) {
  .hero {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .hero header {
    width: 86em;
  }
}
.landing-container .card-img img,
.landing-container .cta-img source,
.landing-container .landing-container .card-img source,
.landing-container .story .about-img,
.landing-contaner .cta-img img {
  object-fit: contain;
  object-position: center;
  height: 100%;
  width: 100%;
}
.landing-container .description,
.landing-container .img-wrapper,
.landing-container .why-donate-blood .cards .description,
.landing-container .why-donate-blood .cards .name,
.landing-container .why-donate-blood .cards .subheadline,
.landing-container h1,
.landing-container h2,
.landing-container h3,
.landing-container p {
  overflow: hidden;
}
.number {
  line-height: 1em;
}
.description,
.subheadline {
  line-height: 2em;
}
.landing-container .highlight {
  color: var(--red-500);
  font-size: 2.5rem;
}
.landing-container > section {
  padding: 1em;
}
.hero {
  position: relative;
  height: 40em;
  background: url("../images/red-cross.png") 0 0 / cover no-repeat;
  background-color: var(--gray-400);
  padding: 0 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero.center,
.landing-container .contact-form header {
  text-align: center;
}
.hero.center .group {
  max-width: none;
}
.hero header {
  gap: 4.5em;
}
.hero .group {
  max-width: 40em;
}
.hero .description,
.hero .title {
  color: var(--white);
}
.landing-container .cta-img,
.landing-container .mission-img .landing-container .card-img {
  height: 100%;
  width: 100%;
}
.landing-container .cta-img {
  width: 50%;
}
.landing-container .features,
.landing-container .why-donate-blood {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 3em;
}
.landing-container .features .title {
  font-size: 3rem;
}
.landing-container .contacts,
.landing-container .features .cards,
.landing-container form .fields {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}
.landing-container .features .cards .card {
  display: flex;
  flex-direction: column;
  justify-content: left;
  text-align: start;
  gap: 1.2em;
  padding: 1em;
  background-color: var(--gray-100);
  min-width: 100%;
  border-radius: 0.4em;
}
.landing-container .features .details {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.landing-container .features .cards .card .description,
.landing-container .features .cards .card .title {
  color: var(--gray-500);
  overflow: hidden;
}
.landing-container .faqs,
.landing-container .features .cards .card .figure {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.landing-container .features .cards .card .title {
  font-size: 1.5rem;
}
.landing-container .features .cards .card .description {
  font-size: 1.1rem;
}
.landing-container .features .cards .card .number {
  overflow: hidden;
  font-size: 4.5rem;
  color: var(--red-500);
}
.landing-container .features .cards .card i {
  font-size: 3em;
}
.landing-container .features .cards .card:first-child {
  background-color: var(--red-100);
}
.landing-container .why-donate-blood .cards {
  display: flex;
  flex-direction: column;
  gap: 2.5em;
}
.landing-container .why-donate-blood .cards .column {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3em;
}
.landing-container .why-donate-blood .cards .card {
  display: flex;
  flex-direction: column;
  gap: 3em;
  flex-direction: column-reverse;
}
.landing-container .why-donate-blood .cards .column:nth-child(2) .card {
  flex-direction: column;
}
.landing-container .why-donate-blood .cards .name {
  font-size: 2.5rem;
}
.landing-container .why-donate-blood .cards .subheadline {
  font-size: 1.375rem;
  font-weight: 600;
}
.landing-container .values .cards .card .group .name,
.landing-container .why-donate-blood .cards .description {
  font-size: 1.2rem;
}
.landing-container .why-donate-blood .cards .details {
  display: flex;
  flex-direction: column;
  text-align: start;
  justify-content: start;
  gap: 1.5em;
}
.landing-container .why-donate-blood .cards .group {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.landing-container .cta,
.landing-container .mission {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: start;
  gap: 3em;
}
.landing-container .mission .wrapper {
  max-width: 96em;
  border-radius: 1.2em;
  padding: 2em;
  border: 1px solid var(--gray-300);
  display: flex;
  flex-direction: column;
  gap: 3em;
}
.landing-container .mission .details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2em;
}
.landing-container .mission header {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  min-width: 30em;
}
.landing-container .mission .highlight,
.landing-container .mission .title {
  font-size: 2rem;
}
.landing-container .mission .subheadline {
  font-size: 1.375rem;
}
.landing-container .mission .description {
  font-size: 1.2rem;
  line-height: 2em;
}
.landing-container .values {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
}
.landing-container .values .cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2em;
  justify-content: center;
  align-items: center;
}
.landing-container .values .cards .card {
  padding: 1em;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px sold var(--gray-300);
  background-color: var(--gray-50);
  border-radius: 0.6em;
  height: 15em;
}
.landing-container .values .cards .card .group {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.landing-container .values .cards .card .group i {
  font-size: 1.5rem;
  background-color: var(--gray-200);
  padding: 0.5em;
  border-radius: 100%;
}
.landing-container .cta .wrapper {
  overflow: hidden;
  position: relative;
  border-radius: 1.2em;
  margin: 2em;
  width: 100%;
  max-width: 72em;
  min-height: 36em;
  padding: 2em 2.5em;
  border: 1px solid var(--zinc-300);
  background-color: var(--red-100);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 3em;
}
.landing-container .cta header {
  max-width: 28em;
  display: flex;
  flex-direction: column;
  gap: 3em;
}
.landing-container .cta .title {
  font-size: 3rem;
  color: var(--red-500);
  font-weight: 500;
}
.landing-container .cta .description {
  font-size: 1.375rem;
  color: var(--gray-500);
}
.landing-container .cta .actions {
  display: flex;
  gap: 2em;
}
.landing-container .cta .cta-img {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  aspect-ratio: 16/9;
  object-fit: contain;
}
.landing-container .story {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2em;
}
.landing-container .story .img-wrapper {
  display: none;
  aspect-ratio: 4/3;
}
.landing-container .story .right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2em;
}
.landing-container .story .right-content .title {
  text-align: start;
  display: flex;
  justify-content: start;
  gap: 0.2em;
}
@media (min-width: 728px) {
  .landing-container .features .cards,
  .landing-container .why-donate-blood .cards {
    flex-direction: row;
  }
  .landing-container .features .cards .card {
    min-height: 22em;
    min-width: auto;
    max-width: 22em;
    padding: 2em;
  }
  .landing-container .why-donate-blood .cards .column {
    max-width: 32em;
  }
  .landing-container .why-donate-blood .cards .card,
  .landing-container .why-donate-blood .cards .column:nth-child(2) .card {
    flex-direction: column;
  }
  .landing-container .cta .cta-img,
  .landing-container .story .img-wrapper {
    display: flex;
  }
  .landing-container .story .right-content {
    justify-content: start;
    text-align: start;
    align-items: flex-start;
  }
}

@media (min-width: 1024px) {
  .landing-container .mission .details {
    margin: 2em;
    flex-direction: row;
  }
}
.landing-container .contact-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2em;
}
.landing-container h3 {
  font-size: 1.8rem;
  font-weight: 600;
}
.landing-container .content {
  max-width: 72em;
  display: flex;
  flex-direction: column;
}
.landing-container .contact-form header .title {
  display: flex;
  gap: 0.4em;
  text-align: center;
  justify-content: center;
}
.landing-container .contact-form header .description {
  color: var(--gray-500);
  font-size: 1.2rem;
}
.landing-container .content {
  display: flex;
  gap: 2em;
  justify-content: center;
  align-items: start;
}
.landing-container .content form {
  height: 100%;
  width: 100%;
  padding: 1.2em;
  background-color: var(--gray-100);
  display: flex;
  flex-direction: column;
  text-align: start;
  border-radius: 0.4em;
  gap: 1.2em;
}
.landing-container form input,
.landing-container form textarea {
  width: 100%;
  border: 1px solid var(--white);
  outline: 0;
  padding: 1em;
}
.landing-container form .group {
  flex: 1;
  display: flex;
  gap: 1.2em;
}
.landing-container form .group .field {
  flex: 1;
}
.landing-container form textarea {
  resize: none;
  flex: 1;
  min-height: 8em;
}
.landing-container form input {
  background-color: var(--white);
}
.landing-container form input:focus-within,
.landing-container form textarea:focus-within {
  border: 1px solid var(--sky-500);
}
.landing-container .details {
  padding: 1.2em;
  text-align: start;
  display: flex;
  justify-content: start;
  flex-direction: column;
  gap: 1.2em;
}
.landing-container .details header {
  display: flex;
  flex-direction: column;
  text-align: start;
  gap: 0.2em;
}
.landing-container .details header .description {
  font-size: 1.2rem;
  color: var(--gray-500);
}
.landing-container .contacts .info {
  display: flex;
  gap: 1.2em;
}
.landing-container .contacts .icon-wrapper {
  min-height: 4em;
  min-width: 4em;
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--red-100);
}
.landing-container .contacts .info i {
  font-size: 1.8rem;
}
.landing-container .contacts .info .group {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  text-align: start;
}
.landing-container .contact-form .info .group .name {
  font-size: 1.2rem;
  font-weight: 600;
}
.landing-container .contact-form .info .value {
  color: var(--gray-500);
}
@media (min-width: 728px) {
  .landing-container > section {
    padding: 2em 3.5em;
  }
  .landing-container .values .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .landing-container .values .cards .card {
    height: 20em;
    justify-items: flex-start;
    padding: 2em;
  }
  .landing-container .contact-form .content {
    flex-direction: row;
  }
  .landing-container .contact-form .content header,
  .landing-container .faqs header {
    width: 100%;
  }
  .landing-container .contact-form .details,
  .landing-container .contact-form form {
    flex: 1;
  }
}
.landing-container .faqs header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 0.4em;
}
.landing-container .faqs header > .description {
  color: var(--gray-600);
}
.landing-container .faqs .accordion {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  text-align: left;
}
.landing-container .faqs .accordion details {
  overflow: hidden;
  padding: 0.5em;
  border: 1px solid var(--gray-300);
  border-radius: 0.4em;
}
.landing-container .faqs .accordion summary {
  padding: 0.8em;
  cursor: pointer;
  position: relative;
  font-weight: 700;
  list-style: none;
}
.landing-container .faqs .accordion summary::marker {
  display: none;
}
.landing-container .faqs .accordion summary::after {
  content: "+";
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s ease-out;
}
.landing-container .faqs .accordion details[open] summary::after {
  content: "-";
}
.landing-container .faqs .accordion-item {
  min-width: inherit;
}
.landing-container .faqs .accordion .accordion-content {
  display: none;
  padding: 0 0.8em;
  color: var(--gray-600);
}
.landing-container .faqs .accordion .accordion-item[open] .accordion-content {
  display: block;
}