/*
 * The speaker events section.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

.speaker-events {
  --gap:40px;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  margin-top:72px;
  width:100%;
}

@media screen and (max-width:1440px) {

  .speaker-events {
    margin-top:56px;
  }
}

@media screen and (max-width:1199px) {

  .speaker-events {
    --gap:32px;
    margin-top:48px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-events {
    --gap:28px;
    margin-top:40px;
  }
}

.speaker-events__list {
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2,calc(25vw - var(--offset-x)*2/4 - 9px));
  width:100%;
}

@media screen and (max-width:1440px) {

  .speaker-events__list {
    gap:8px;
  }
}

@media screen and (max-width:1199px) {

  .speaker-events__list {
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-events__list {
    gap:calc(var(--grid-column-width)/4);
    grid-template-columns:repeat(1,1fr);
  }
}

.speaker-events__heading {
  font-size:44px;
  font-weight:400;
}

@media screen and (max-width:1440px) {

  .speaker-events__heading {
    font-size:28px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-events__heading {
    font-size:20px;
  }
}