/*  ===============================  *
 *           Landing Page            *
 *  ================================ */
/* Mobile */
@media only screen and (min-width: 0em) {
  #hero {
    background: url("../images/about-hero-m.jpg") no-repeat center;
    background-size: cover;
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #hero {
    background: url("../images/about-hero.jpg") no-repeat center;
    background-size: cover;
  }
}
/*  ===============================  *
 *               Intro               *
 *  ================================ */
/* Mobile */
/* Tablet */
/* Small Desktop */
/* Large Desktop */
/*  ===============================  *
 *              About                *
 *  ================================ */
/* Mobile */
@media only screen and (min-width: 0em) {
  #about {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10em;
  }
  #about #intro {
    z-index: 5;
  }
  #about #intro .dual-container picture,
  #about #intro .dual-container img {
    width: 16.65em;
    height: 14.7em;
  }
  #about #intro .dual-container picture {
    position: relative;
  }
  #about #intro .dual-container picture:before {
    content: '';
    position: absolute;
    height: 133%;
    width: 160%;
    background: var(--primary);
    opacity: 1;
    top: -4em;
    left: 45%;
    z-index: -1;
    border-top-left-radius: 9em;
  }
  #about #values {
    z-index: 5;
    position: relative;
  }
  #about #values .dual-container .cards {
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
  }
  #about #values .dual-container .cards .card {
    z-index: 5;
    background: linear-gradient(180deg, var(--secondary) 3%, #FFF 3.01%);
    box-shadow: 0 4px 20px 4px rgba(0, 0, 0, 0.15);
    border-radius: 0.5em;
    width: 15em;
    padding: 1.5em;
  }
  #about #values .dual-container .cards .card img {
    margin: 0.5em 0 1em;
  }
  #about #values .dual-container .left h2,
  #about #values .dual-container .left p,
  #about #values .dual-container .left span {
    z-index: 5;
  }
  #about #values:before {
    content: "";
    display: none;
    width: 52.85em;
    height: 68.4em;
    position: absolute;
    background-image: url('../images/blob-5.svg');
    background-size: cover;
    opacity: 1;
    top: 15em;
    left: -8.75em;
    z-index: 1;
  }
  #about #owner {
    z-index: 5;
  }
  #about #owner .dual-container picture,
  #about #owner .dual-container img {
    width: 16.65em;
    height: 14.7em;
  }
  #about #owner .dual-container .emphasis {
    padding-left: 0.3em;
    border-left: 6px solid var(--primary);
  }
  #about #owner .dual-container picture {
    position: relative;
  }
  #about #owner .dual-container picture:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 110%;
    background: var(--primary);
    opacity: 1;
    top: -2em;
    left: 8%;
    z-index: -1;
    border-top-right-radius: 9em;
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #about #intro {
    display: flex;
    justify-content: center;
    margin-bottom: 4em;
  }
  #about #intro .dual-container picture,
  #about #intro .dual-container img {
    width: 29.65em;
    height: 26.35em;
  }
  #about #owner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #about #owner .dual-container picture,
  #about #owner .dual-container img {
    width: 26.7em;
    height: 26.35em;
  }
  #about #values .dual-container .cards {
    flex-direction: row;
    align-items: initial;
    flex-wrap: wrap;
    gap: 1em;
    width: 33em;
  }
  #about #values .dual-container .cards .card {
    background: linear-gradient(180deg, var(--secondary) 3%, #FFF 3.01%);
    box-shadow: 0 4px 20px 4px rgba(0, 0, 0, 0.15);
    border-radius: 0.5em;
    width: 15em;
    padding: 1.5em;
  }
  #about #values .dual-container .cards .card img {
    margin: 0.5em 0 1em;
  }
  #about #values .dual-container .cards .card:first-child,
  #about #values .dual-container .cards .card:nth-child(3n) {
    transform: translateY(-2em);
  }
  #about #values:before {
    display: initial;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64em) {
  #about {
    gap: 10em;
  }
  #about #values:before {
    width: 52.85em;
    height: 68.4em;
    left: -3.75em;
    top: -10em;
  }
}
/* Large Desktop */