/*
 * The speakers list 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.
 */

.speakers-list {
  display:grid;
  gap:8px;
  grid-template-columns:repeat(6,1fr);
  margin-top:32px;
  padding-inline:var(--offset-x);
  width:100%;
}

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

  .speakers-list {
    gap:6px;
    margin-top:24px;
  }
}

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

  .speakers-list {
    grid-template-columns:repeat(3,1fr);
  }
}

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

  .speakers-list {
    grid-template-columns:repeat(2,1fr);
    margin-top:16px;
  }
}

.speakers__card {
  background-color:#181818;
  cursor:pointer;
  overflow:hidden;
  position:relative;
}

.speakers__card-link {
  display:block;
  height:100%;
}

.speakers__card picture,
.speakers__card-image {
  display:block;
  width:100%;
}

.speakers__card-image {
  aspect-ratio:3/4;
  filter:grayscale(1);
  height:auto;
  object-fit:cover;
  transition:transform .6s ease;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .speakers__card-image:not(:disabled):hover {
    transform:scale(1.04);
  }
}

.speakers__card-scrim {
  aspect-ratio:3/4;
  background:linear-gradient(0deg,#181818,#18181800 24%);
  left:0;
  pointer-events:none;
  position:absolute;
  top:0;
  width:100%;
}

.speakers__card-text {
  border-left:3px solid #e1251b;
  color:#fff;
  margin:18px 16px 20px;
  padding-left:17px;
  position:relative;
}

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

  .speakers__card-text {
    margin:14px 14px 18px;
    padding-left:14px;
  }
}

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

  .speakers__card-text {
    margin:12px 12px 16px;
    padding-left:12px;
  }
}

.speakers__card-arrow-elem {
  color:#fff;
  opacity:0;
  position:absolute;
  right:0;
  top:0;
  transform:translate(-6px,6px);
  transition:opacity .3s ease,transform .3s ease;
  z-index:2;
}

.speakers__card-arrow-elem svg {
  --size:18px;
  height:var(--size);
  position:absolute;
  right:14px;
  top:14px;
  width:var(--size);
}

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

  .speakers__card-arrow-elem svg {
    --size:14px;
    right:12px;
    top:12px;
  }
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .speakers__card:hover .speakers__card-arrow-elem {
    opacity:1;
    transform:translate(0);
  }
}

.speakers__card-position {
  margin-top:6px;
}

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

  .speakers__card-position {
    margin-top:4px;
  }
}

.speakers__card-company,
.speakers__card-position {
  opacity:.85;
}