@import "./base.css";

.speakers .main__title {
  font-size: 98px;
}

.shopping-cart-icon--primary g path {
  fill: var(--color-primary);
}

.speakers__wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 200px;
  grid-row-gap: 120px;
}

.speaker__wrapper {
  max-width: 460px;
}

.speaker__photo {
  width: 310px;
  height: 310px;
  object-fit: cover;
  margin-bottom: 36px;
}

.speaker__photo--top {
  object-position: top;
}

.speaker__name {
  font-size: 32px;
  margin-bottom: 20px;
}

.speaker__company {
  font-size: 24px;
  margin-bottom: 32px;
}

.speaker__bio {
  font-size: 20px;
}

.speaker__company,
.speaker__bio {
  color: var(--color-text-on-secondary);
}

@media (width < 1000px) {
  .speakers__wrapper {
    grid-template-columns: 1fr;
  }
}

@media (width < 840px) {
  .nav {
    background-color: var(--color-text-on-primary);
  }
}