#landing-hero {
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: 2em;
}

#landing-hero img {
  margin-bottom: 1em;
  object-fit: cover;
  object-position: center;
  height: 100%;
}

.icon-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.icons {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

#landing-stories {
  margin-top: 2em;
  display: flex;
  flex-direction: column;
}

#landing-stories h2 {
  text-align: center;
  border-bottom: 3px solid var(--brand);
  margin: auto;
  margin-bottom: 1em;
  max-width: max-content;
}


.story-card {
  border: 1px solid #ccc;
  box-shadow: 7px 7px 5px 0px var(--shadow);
  max-width: 1000px;
  margin: auto;
  margin-top: 1em;
  margin-bottom: 3em;
}

body[data-theme="dark"] .story-card {
    border: 1px solid #484848;
    box-shadow: none; //7px 7px 5px 0px var(--brand);
}

.story-card :is(h1, h2, h3) {
  text-align: center;
  margin: 1em auto;
  max-width: 30ch;
}

#landing-stories .story-card h3 {
  font-size: 2em;
}

.story-card .content {
  max-width: 80%;
  margin: auto;
  font-size: 1.4em;
  padding: 1em 0;
}

.story-card .transcript[open] {
  border-bottom: 1px solid #ccc;
}

.story-card .transcript {
  margin-bottom: 1em;
}

.story-card p + ul {
  margin-top: -1.5em;
}

.story-card .subtitle {
  color: var(--text);
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  text-align: center;
  font-size: 1em;
  margin-top: 1em;
  padding: 1em;
  margin-bottom: -4%;
  text-transform: uppercase;
}

.story-card img {
  margin: auto;
  width: 100%;
}

.story-card .url {
  text-align: center;
  margin-bottom: 1.1em;
  font-size: 1.1em;
}

.story-conference-list li {
  margin-bottom: 1em;
}

.story--testimonial-wrapper {
  display: flex;
  flex-direction: column;
}

.story--testimonial-wrapper img {
  max-width: 200px;
}

.story--testimonial-info {
  text-align: center;
  padding-bottom: 1em;
  flex-grow: 1;
}

.story--testimonial-image {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}

.story--testimonial-text {
  padding-bottom: 1em;
}

.story--testimonial {
  margin-bottom: 2em;
}

.story--testimonial:not(:last-child) {
  border-bottom: 1px solid var(--brand);
}

@media screen and (min-width: 1100px) {
  #landing-hero {
    flex-direction: row;
  }
  #landing-hero > div {
    max-width: 50%;
  }

  .story-card {
    max-width: 70%;
  }

  #landing-hero > div:first-child {
    padding-right: 2em;
  }

  #landing-hero > div:last-child {
    padding-left: 2em;
  }

  .story--testimonial-wrapper {
    flex-direction: row;
  }

  .story--testimonial-image {
    flex-shrink: 0;
    max-width: 33%;
    flex-direction: column;
  }

  .story--testimonial-info {
    text-align: center;
    font-size: 0.7em;
  }

  .story--testimonial-text {
    margin: 1em;
  padding: 0 2em;
  width: 100%;
  font-size: 0.9em;
  }

  .story--testimonial-wrapper img {
    max-width: max-content;
  }

}

[data-theme="dark"] {
  & .landing-hero-dark {
    display: block
  }

  & .landing-hero-light {
    display: none
  }
} 

[data-theme="light"] {
  & .landing-hero-light {
    display: block
  }

  & .landing-hero-dark {
    display: none
  }
}