/*
 * The main event format 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.
 */

.main-formats {
  align-items:flex-start;
  background-color:#f1ede4;
  background:linear-gradient(180deg,#f1ede4 60%,#181818 0);
  contain:layout paint;
  display:flex;
  flex-direction:column;
  gap:87px;
  min-height:175vh;
  overflow:clip;
  position:relative;
  width:100%;
}

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

  .main-formats {
    background:linear-gradient(180deg,#f1ede4 65%,#181818 0);
    gap:54px;
  }
}

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

  .main-formats {
    background:linear-gradient(180deg,#f1ede4 60%,#181818 0);
    gap:158px;
  }
}

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

  .main-formats {
    background:#181818;
    gap:34px;
    min-height:auto;
  }
}

.main-formats__inner {
  position:-webkit-sticky;
  position:sticky;
  top:0;
  width:100%;
  z-index:10;
}

.main-formats__inner:after {
  background:#181818;
  content:"";
  height:50%;
  left:0;
  position:absolute;
  top:calc(100% - 10px);
  width:100%;
}

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

  .main-formats__inner {
    position:static;
  }

  .main-formats__inner:after {
    display:none;
  }
}

.main-formats__heading {
  align-items:flex-start;
  background:#f1ede4;
  display:flex;
  justify-content:space-between;
  padding-bottom:100px;
  padding-left:var(--offset-x);
  padding-right:calc(var(--grid-column-width)*3);
  padding-top:125px;
  width:100%;
}

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

  .main-formats__heading {
    padding-top:100px;
  }
}

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

  .main-formats__heading {
    padding-inline:var(--offset-x);
    padding-top:124px;
  }
}

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

  .main-formats__heading {
    flex-direction:column;
    gap:14px;
    padding-top:75px;
  }
}

.main-formats__description {
  width:calc(var(--grid-column-width)*5 + var(--grid-gap)*4);
}

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

  .main-formats__description {
    width:calc(var(--grid-column-width)*6 + var(--grid-gap)*5);
  }
}

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

  .main-formats__description {
    width:100%;
  }
}

.pin-spacer:has(.main-formats) {
  background:#181818;
}

.main-formats__list {
  align-items:stretch;
  background-image:url(/build/city-pattern.svg),linear-gradient(180deg,#f1ede4 50%,#181818 0);
  background-position:0 0;
  background-repeat:repeat-x;
  color:#fff;
  display:flex;
  gap:calc(var(--grid-column-width)*4);
  min-width:100%;
  padding:215px var(--grid-column-width) 96px;
  position:relative;
  width:-webkit-max-content;
  width:max-content;
  will-change:transform;
  z-index:1;
}

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

  .main-formats__list {
    background-image:url(/build/city-pattern-laptop.svg),linear-gradient(180deg,#f1ede4 50%,#181818 0);
    gap:calc(var(--grid-column-width)*3.5);
    padding:138px var(--grid-column-width) 64px;
  }
}

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

  .main-formats__list {
    background-image:url(/build/city-pattern-tablet.svg),linear-gradient(180deg,#f1ede4 50%,#181818 0);
    padding:234px var(--grid-column-width) 192px;
  }
}

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

  .main-formats__list {
    background-image:none;
    flex-direction:column;
    gap:44px;
    min-width:0;
    padding:44px var(--offset-x) 56px;
    width:100%;
  }
}

.main-formats__item {
  display:flex;
  flex-direction:column;
  gap:58px;
  justify-content:space-between;
  width:calc(var(--grid-column-width)*6 + var(--grid-gap)*5);
}

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

  .main-formats__item {
    gap:39px;
    width:calc(var(--grid-column-width)*6.5 + var(--grid-gap)*5.5);
  }
}

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

  .main-formats__item {
    gap:18px;
    position:relative;
    width:100%;
  }
}

.main-formats__item-info {
  align-items:flex-end;
  display:flex;
  justify-content:space-between;
}

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

  .main-formats__item-info {
    align-items:stretch;
    flex-direction:column;
    gap:16px;
    margin-top:0;
  }
}

.main-formats__item-info-description {
  width:calc(var(--grid-column-width)*3 + var(--grid-gap)*2);
}

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

  .main-formats__item-info-description {
    width:calc(var(--grid-column-width)*3.5 + var(--grid-gap)*2.5);
  }
}

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

  .main-formats__item-info-description {
    width:100%;
  }
}

.main-formats__item-info-image {
  height:190px;
  object-fit:cover;
  width:calc(var(--grid-column-width)*3 + var(--grid-gap)*2);
}

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

  .main-formats__item-info-image {
    height:128px;
  }
}

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

  .main-formats__item-info-image {
    height:200px;
    width:100%;
  }

  .main-formats__item-heading {
    position:static;
    width:100%;
  }
}

.main-formats__item-line {
  background-color:#e1251b;
  display:block;
  height:3px;
  margin-bottom:18px;
  width:40px;
}

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

  .main-formats__item-line {
    margin-bottom:14px;
    width:32px;
  }
}

.main-formats__item-title {
  margin-top:8px;
}

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

  .main-formats__item-title {
    margin-top:6px;
    margin-top:14px;
  }
}

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

  .main-formats__item.main-formats__item {
    gap:18px;
    width:100%;
  }

  .main-formats__item-info-description.main-formats__item-info-description {
    width:100%;
  }

  .main-formats__item-info-image.main-formats__item-info-image {
    height:200px;
    width:100%;
  }
}

.pin-spacer {
  background-color:#f1ede4;
}