:root {
    --adaptiveScreen: ((100dvw - 320px) / (1920 - 320));
    
    --fontSize: max(16px + 0 * var(--adaptiveScreen), 0.83vmax);
    --xlSize: max(25px + 9 * var(--adaptiveScreen), 14.2vmin);
    --h1Size: max(24px + 16 * var(--adaptiveScreen), 3vmax);
    --h2Size: max(35px + 29 * var(--adaptiveScreen), 3.33vmax);
    --h3Size: max(22px + 22 * var(--adaptiveScreen), 2.29vmax);
    --h4Size: max(16px + 3 * var(--adaptiveScreen), 0.99vmax);
    --h5Size: max(16px + 0 * var(--adaptiveScreen), 1.4vmax);
    --smallSize: max(13px + 2 * var(--adaptiveScreen), 0.78vmax);
    
    --backColor: #f4efe6;
    --mainColor: #547f54;
    --secondColor: #72a77273;
    --blackColor: #151515;
    --whiteColor: #DFDFDF;
    --errorColor: darkred;
    --mainWhiteColor: white;
    --mainBlackColor: #DFDFDF;
    --activeColor: #547f54;
    --greyColor: #e9e9e9;
    
    --whatsappColor: #6DD568;
    --telegramColor: #27a7e7;
    --youtubeColor: #E93F33;
    --rutubeColor: #12CCED;
    --vkColor: #0077FF;
    --okColor: #FF7700;
    --facebookColor: #3b5998;
    --instagramColor1: #C13584;
    --instagramColor2: #F77737;
    --tiktokColor1: #25F4EE;
    --tiktokColor2: #FE2C55;
    
    --borderRadius: 0.45vmax;
    --outline: 2px solid;
    
    --distanceSmall: 0.5vmax;
    --distanceNormal: 1vmax;
    --distanceLarge: 1.9vmax;
    --distanceBig: 6.1vmax;

    --heightSmall: 10rem;
    --heightNormal: 30rem;
    --heightLarge: calc(100vh - 20rem);
    --heightAll: 100vh;
    
    --fontTitle: 'Manrope', Arial, sans-serif;;
    --fontText: 'Manrope', Arial, sans-serif;;
    
    --ttf1: cubic-bezier(0.05, 0.61, 0.41, 0.95);
    --td1: 0.9s;
    --animate: overlay var(--td1) var(--ttf1) allow-discrete,
               transform var(--td1) var(--ttf1), 
               opacity var(--td1) var(--ttf1), 
               width var(--td1) var(--ttf1), 
               height var(--td1) var(--ttf1), 
               display var(--td1) var(--ttf1) allow-discrete;
    --nthAnimate: 1;
  }
 
 /*сетка*/
.grid__container1 {--col: 1;}
.grid__container2 {--col: 2;}
.grid__container3 {--col: 3;}
.grid__container4 {--col: 4;}
.grid__container5 {--col: 5;}
.grid__container6 {--col: 6;}
.grid__container7 {--col: 7;}
.grid__container8 {--col: 8;}
.grid__container9 {--col: 9;}
.grid__container10 {--col: 10;}
.grid__container11 {--col: 11;}
.grid__container12 {--col: 12;}

[class*="grid__container"] {
  display: grid;
  grid-template-columns: repeat(var(--col), minmax(0, 1fr));
}

[class*="grid__col01"] { --span-lg: 1; }
[class*="grid__col02"] { --span-lg: 2; }
[class*="grid__col03"] { --span-lg: 3; }
[class*="grid__col04"] { --span-lg: 4; }
[class*="grid__col05"] { --span-lg: 5; }
[class*="grid__col06"] { --span-lg: 6; }
[class*="grid__col07"] { --span-lg: 7; }
[class*="grid__col08"] { --span-lg: 8; }
[class*="grid__col09"] { --span-lg: 9; }
[class*="grid__col10"] { --span-lg: 10; }
[class*="grid__col11"] { --span-lg: 11; }
[class*="grid__col12"] { --span-lg: 12; }

/* MD - вторая цифра - планшеты, с нижним подчеркиванием */
[class*="_01"] { --span-md: 1; }
[class*="_02"] { --span-md: 2; }
[class*="_03"] { --span-md: 3; }
[class*="_04"] { --span-md: 4; }
[class*="_05"] { --span-md: 5; }
[class*="_06"] { --span-md: 6; }
[class*="_07"] { --span-md: 7; }
[class*="_08"] { --span-md: 8; }
[class*="_09"] { --span-md: 9; }
[class*="_10"] { --span-md: 10; }
[class*="_11"] { --span-md: 11; }
[class*="_12"] { --span-md: 12; }

/* SM- третья цифра - телефоны, с дефисом */
[class*="-01"] { --span-sm: 1; }
[class*="-02"] { --span-sm: 2; }
[class*="-03"] { --span-sm: 3; }
[class*="-04"] { --span-sm: 4; }
[class*="-05"] { --span-sm: 5; }
[class*="-06"] { --span-sm: 6; }
[class*="-07"] { --span-sm: 7; }
[class*="-08"] { --span-sm: 8; }
[class*="-09"] { --span-sm: 9; }
[class*="-10"] { --span-sm: 10; }
[class*="-11"] { --span-sm: 11; }
[class*="-12"] { --span-sm: 12; }

[class*="grid__col"] { 
  --span: var(--span-lg, var(--col));
    grid-column: span var(--span);
}

@media (orientation: landscape) and (min-width: 1023px) {
  [class*="grid__col"] { --span: var(--span-lg, var(--col)); }}

@media (orientation: portrait) and (min-width: 768px),
       (orientation: landscape) and (max-width: 1023px) {
  [class*="grid__col"]{ --span: var(--span-md, var(--span-lg)); }}

@media (orientation: portrait) and (max-width: 767px) {
  [class*="grid__col"] { --span: var(--span-sm, var(--span-md, var(--span-lg))); }}

/*контейнеры*/
.wrapper {
    width: min(100% - 1rem, 60rem + 20vw);
    margin-inline: auto;
}

.wide__wrapper {
    width: calc(100% - (2 * var(--distanceNormal)));
    margin-inline: auto;
}

/*расположения*/
.jc__start { justify-content: start; }
.jc__end { justify-content: end; }
.jc__center { justify-content: center; }
.jc__between { justify-content: space-between; }
.jc__around { justify-content: space-around; }
.jc__evenly { justify-content: space-evenly; }
  
.ac__end { align-content: end; }
.ac__center { align-content: center; }
.ac__between { align-content: space-between; }
.ac__around { align-content: space-around; }
.ac__evenly { align-content: space-evenly; }
.ac__start { align-content: start; }
  
.ji__start { justify-items: start; }
.ji__center { justify-items: center; }
.ji__end { justify-items: end; }
.ji__stretch { justify-items: stretch; }
  
.ai__start { align-items: start; }
.ai__center { align-items: center; }
.ai__end { align-items: end; }
.ai__stretch { align-items: stretch; }
  
.as__start { align-self: start; }
.as__center { align-self: center; }
.as__end { align-self: end; }
.as__stretch { align-self: stretch; }
.as__baseline { align-self: baseline; }

.js__start { justify-self: start; }
.js__center { justify-self: center; }
.js__end { justify-self: end; }
.js__stretch { justify-self: stretch; }
.js__baseline { justify-self: baseline; }

.op__t { object-position: top; }
.op__c { object-position: center; }
.op__b { object-position: bottom; }
.op__l { object-position: left; }
.op__r { object-position: right; }

.op__tl { object-position: top left; }
.op__tc { object-position: top center; }
.op__tr { object-position: top right; }
.op__cl { object-position: center left; }
.op__cc { object-position: center center; }
.op__cr { object-position: center right; }
.op__bl { object-position: bottom left; }
.op__bc { object-position: bottom center; }
.op__br { object-position: bottom right; }

.ta__start   { text-align: start; }
.ta__center  { text-align: center; }
.ta__end     { text-align: end; }
.ta__justify { text-align: justify; }

/*отступы*/
.g__small  { gap: var(--distanceSmall); }
.g__normal { gap: var(--distanceNormal); }
.g__large  { gap: var(--distanceLarge); }
.g__big    { gap: var(--distanceBig); }

/* Все 4 марджина */
.m__small   { margin: var(--distanceSmall); }
.m__normal  { margin: var(--distanceNormal); }
.m__large   { margin: var(--distanceLarge); }
.m__big     { margin: var(--distanceBig); }

/* Block (вертикальные) */
.mb__small   { margin-block: var(--distanceSmall); }
.mb__normal  { margin-block: var(--distanceNormal); }
.mb__large   { margin-block: var(--distanceLarge); }
.mb__big     { margin-block: var(--distanceBig); }

/* Inline (горизонтальные) */
.mi__small   { margin-inline: var(--distanceSmall); }
.mi__normal  { margin-inline: var(--distanceNormal); }
.mi__large   { margin-inline: var(--distanceLarge); }
.mi__big     { margin-inline: var(--distanceBig); }

/* Отдельные стороны block */
.mbs__small   { margin-block-start: var(--distanceSmall); }
.mbs__normal  { margin-block-start: var(--distanceNormal); }
.mbs__large   { margin-block-start: var(--distanceLarge); }
.mbs__big     { margin-block-start: var(--distanceBig); }

.mbe__small   { margin-block-end: var(--distanceSmall); }
.mbe__normal  { margin-block-end: var(--distanceNormal); }
.mbe__large   { margin-block-end: var(--distanceLarge); }
.mbe__big     { margin-block-end: var(--distanceBig); }

/* Отдельные стороны inline */
.mis__small   { margin-inline-start: var(--distanceSmall); }
.mis__normal  { margin-inline-start: var(--distanceNormal); }
.mis__large   { margin-inline-start: var(--distanceLarge); }
.mis__big     { margin-inline-start: var(--distanceBig); }

.mie__small   { margin-inline-end: var(--distanceSmall); }
.mie__normal  { margin-inline-end: var(--distanceNormal); }
.mie__large   { margin-inline-end: var(--distanceLarge); }
.mie__big     { margin-inline-end: var(--distanceBig); }

/* Все 4 паддинга */
.p__small   { padding: var(--distanceSmall); }
.p__normal  { padding: var(--distanceNormal); }
.p__large   { padding: var(--distanceLarge); }
.p__big     { padding: var(--distanceBig); }

/* Block (вертикальные) */
.pb__small   { padding-block: var(--distanceSmall); }
.pb__normal  { padding-block: var(--distanceNormal); }
.pb__large   { padding-block: var(--distanceLarge); }
.pb__big     { padding-block: var(--distanceBig); }

/* Inline (горизонтальные) */
.pi__small   { padding-inline: var(--distanceSmall); }
.pi__normal  { padding-inline: var(--distanceNormal); }
.pi__large   { padding-inline: var(--distanceLarge); }
.pi__big     { padding-inline: var(--distanceBig); }

/* Отдельные стороны block */
.pbs__small   { padding-block-start: var(--distanceSmall); }
.pbs__normal  { padding-block-start: var(--distanceNormal); }
.pbs__large   { padding-block-start: var(--distanceLarge); }
.pbs__big     { padding-block-start: var(--distanceBig); }

.pbe__small   { padding-block-end: var(--distanceSmall); }
.pbe__normal  { padding-block-end: var(--distanceNormal); }
.pbe__large   { padding-block-end: var(--distanceLarge); }
.pbe__big     { padding-block-end: var(--distanceBig); }

/* Отдельные стороны inline */
.pis__small   { padding-inline-start: var(--distanceSmall); }
.pis__normal  { padding-inline-start: var(--distanceNormal); }
.pis__large   { padding-inline-start: var(--distanceLarge); }
.pis__big     { padding-inline-start: var(--distanceBig); }

.pie__small   { padding-inline-end: var(--distanceSmall); }
.pie__normal  { padding-inline-end: var(--distanceNormal); }
.pie__large   { padding-inline-end: var(--distanceLarge); }
.pie__big     { padding-inline-end: var(--distanceBig); }

/*направления*/
.vert {
  display: grid;
  align-items: baseline;
}

.hor {
display: grid;
grid-auto-columns: auto;
grid-auto-flow: column;
justify-items: start;
}

/*анимации*/
  [data-animation] {
    transition: var(--animate);
    opacity: 0;
    content-visibility: auto;
  }

  [data-animation^="fadeindown"] {
    --transform: translate(0, 5rem);
    transform: var(--transform);
  }
  
  [data-animation^="fadeinup"] {
    --transform: translate(0, -5rem);
    transform: var(--transform);
  }
  
  [data-animation^="fadeinright"] {
    --transform: translate(5rem, 0);
    transform: var(--transform);
  }
  
  [data-animation^="fadeinleft"] {
    --transform: translate(-5rem, 0);
    transform: var(--transform);
  }

  [data-animation^="opacity"] {
    --transform: translate(0, 0);
    transform: var(--transform);
    opacity: 0;
  }

  [data-animation*="width"] {
    width: 0%;
    object-fit: cover;
  }
  
  [data-animation*="-display"] {
    display: none;
}

[data-animation].show {
    opacity: 1;
    transform: translate(0, 0);
    transition-delay: calc(var(--nthAnimate) * 0.09s);
    display: grid;
     content-visibility: visible;
        @starting-style { 
           opacity: 0;
           transform: var(--transform);
    }
  }
  
[data-animation*="width"].show {
  width: 100%;
  @starting-style {
    width: 0%;
  }
}

/*кнопки*/
button, .like__button {
  background-color: var(--blackColor);
  color: var(--whiteColor);
  padding: var(--distanceSmall) var(--distanceLarge);
  transition: background-color 0.3s, color 0.3s;
  border-radius: var(--borderRadius);
  text-align: center;
  width: fit-content;
  white-space: nowrap;
&:hover {
  background-color: var(--whiteColor);
  color: var(--blackColor);
}
}

a.like__button {
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* типографические примитивы */
p.big {
  font-size: var(--h4Size);
  line-height: 1.35;
}

small {
  font-size: var(--smallSize);
  opacity: 0.85;
}

time {
  display: inline-block;
  font-size: var(--smallSize);
  opacity: 0.8;
}

/* скролл-снэп и карусели */
.snap__x {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 1fr);
  gap: var(--distanceNormal);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}

.snap__x > * {
  scroll-snap-align: start;
}

/* стек для слайда: картинка и ссылка в одной ячейке */
.snap__x--screen > .slide {
  grid-template-rows: 100%;
  height: inherit;
        display: grid;
    align-content: end;
    justify-items: start;
}
.snap__x--screen > .slide > * {
  grid-area: 1 / 1;
}

  .snap__x--screen {
    grid-auto-columns: 100vw;
    gap: 0;
    height: var(--heightAll);
  }


/* медиа и соотношения */
.ratio {
  --ratio: 16 / 9;
  aspect-ratio: var(--ratio);
}

.ratio__1-1 { --ratio: 1 / 1; }
.ratio__4-3 { --ratio: 4 / 3; }
.ratio__3-4 { --ratio: 3 / 4; }
.ratio__16-9 { --ratio: 16 / 9; }
.ratio__9-16 { --ratio: 9 / 16; }
.ratio__4-1 { --ratio: 4 / 1; }

.img__fullw {
  width: 100%;
  height: auto;
}

.img__fullh {
  height: 100%;
  width: auto;
}

.w__full { width: 100%; }
.h__full { height: 100%; }

.img__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos-x) 0;
}

.img__contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.embed__lazy {
  position: relative;
  overflow: hidden;
  border-radius: var(--borderRadius);
  background: var(--blackColor);
}

.embed__lazy > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.embed__lazy-button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: var(--distanceSmall);
  padding: var(--distanceNormal);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--blackColor) 62%, transparent) 0%,
    transparent 55%
  );
  color: var(--mainWhiteColor);
  text-align: left;
}

.embed__lazy-button svg {
  width: 2.6rem;
  height: 2.6rem;
}

.embed__lazy-title {
  font-size: var(--h4Size);
  line-height: 1.25;
}

.embed__lazy iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.figure__media {
  display: grid;
  gap: var(--distanceSmall);
}

.figure__media figcaption {
  font-size: var(--smallSize);
  opacity: 0.8;
}

/* функциональные части карточки */
.card__media {
  position: relative;
  overflow: hidden;
}

.card__media > img,
.card__media > video,
.card__media > iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  display: grid;
  gap: var(--distanceSmall);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--distanceSmall);
  align-items: center;
  font-size: var(--smallSize);
  opacity: 0.82;
}

.card__title {
  font-size: var(--h4Size);
}

.card__subtitle {
  font-size: var(--smallSize);
  opacity: 0.85;
}

.card__text {
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--distanceSmall);
  align-items: center;
  margin-block-start: auto;
}

.card__actions > :last-child {
  margin-inline-start: auto;
}

.card__badge {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mainColor) 15%, transparent);
}

.card--media-bg {
  display: grid;
  grid-template-areas: "card";
}

.card--media-bg > .card__media,
.card--media-bg > .card__body {
  grid-area: card;
}

.card--media-bg > .card__body {
  align-self: end;
}

.card--media-top {
  display: grid;
  grid-template-rows: auto 1fr;
}

.card--media-left {
  display: grid;
  grid-template-columns: minmax(12rem, 1.1fr) 1fr;
  gap: var(--distanceNormal);
}

@media (orientation: portrait) and (max-width: 767px) {
  .card--media-left {
    grid-template-columns: 1fr;
  }
}

.card--micro-top {
  position: relative;
  padding-block-start: calc(var(--distanceLarge) + 2.6rem);
}

.card--micro-top > .card__badge {
  position: absolute;
  inset-block-start: var(--distanceNormal);
  inset-inline-start: var(--distanceNormal);
}

.card--micro-side {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--distanceNormal);
  align-items: start;
}

/* навигационные функциональные блоки */
.nav__mobile-mini {
  display: flex;
  gap: var(--distanceSmall);
  flex-wrap: wrap;
  align-items: center;
}

/* поиск */
.search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--distanceSmall);
  align-items: center;
}

.search input[type="search"] {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--blackColor) 20%, transparent);
  border-radius: var(--borderRadius);
  padding: var(--distanceSmall) var(--distanceNormal);
}

/* кнопки и варианты */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--distanceSmall);
}

.button--active {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mainColor) 60%, transparent);
}

.button--disabled,
.button[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.button--secondary {
  background-color: color-mix(in srgb, var(--greyColor) 80%, transparent);
  color: var(--blackColor);
}

.button--icon > svg {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

.button--marquee {
  overflow: hidden;
  max-inline-size: 16rem;
}

.button--marquee > span {
  display: inline-block;
  min-width: 100%;
  white-space: nowrap;
  animation: buttonMarquee 8s linear infinite;
}

@keyframes buttonMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-55%); }
}

/* переключатели */
.bull {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: 999px;
}

.bull__filter {
  border: 1px solid color-mix(in srgb, var(--blackColor) 22%, transparent);
  background: color-mix(in srgb, var(--backColor) 92%, transparent);
}

.toggle {
  --toggle-w: 3rem;
  --toggle-h: 1.8rem;
  --thumb: calc(var(--toggle-h) - 0.35rem);
  position: relative;
  display: inline-block;
  inline-size: var(--toggle-w);
  block-size: var(--toggle-h);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blackColor) 22%, transparent);
}

.toggle::after {
  content: "";
  position: absolute;
  inset-block-start: 0.175rem;
  inset-inline-start: 0.175rem;
  inline-size: var(--thumb);
  block-size: var(--thumb);
  border-radius: 999px;
  background: var(--mainWhiteColor);
  transition: transform 0.25s ease;
}

input[type="checkbox"]:checked + .toggle::after {
  transform: translateX(calc(var(--toggle-w) - var(--thumb) - 0.35rem));
}

.toggle--theme {
  background: linear-gradient(90deg, #3a3a63 0%, #f0c66f 100%);
}

.toggle__triple {
  --slot: 2.2rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, var(--slot));
  border-radius: 999px;
  background: color-mix(in srgb, var(--greyColor) 75%, transparent);
  padding: 0.2rem;
}

.toggle__triple > .is-on {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: calc(var(--slot) - 0.4rem);
  height: calc(100% - 0.4rem);
  border-radius: 999px;
  background: var(--mainWhiteColor);
}

/* формы */
textarea,
select {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--blackColor) 20%, transparent);
  border-radius: var(--borderRadius);
  padding: var(--distanceSmall) var(--distanceNormal);
  background: color-mix(in srgb, var(--mainWhiteColor) 88%, transparent);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--mainColor);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--mainColor);
}

/* details/summary и dialog */
.details__grid {
  display: grid;
  gap: var(--distanceSmall);
  border-radius: var(--borderRadius);
  padding: var(--distanceNormal);
  background: color-mix(in srgb, var(--greyColor) 45%, transparent);
}

.details__grid > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
}

dialog.dialog__form,
dialog.dialog__img {
  width: min(100% - 2rem, 54rem);
  border-radius: var(--borderRadius);
  background: var(--backColor);
  color: var(--blackColor);
  padding: var(--distanceLarge);
}

dialog.dialog__img {
  width: min(100% - 2rem, 72rem);
  padding: var(--distanceNormal);
}

/* Блок трейлеров */
.trailers {
  display: grid;
  gap: 0.75rem;
}

.trailers__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.trailers__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45em 0.9em;
  border: 1px solid var(--greyColor, #ccc);
  background: transparent;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.trailers__tab small {
  font-size: 0.75em;
  opacity: 0.6;
}

.trailers__tab:hover {
  border-color: var(--mainColor);
}

.trailers__tab.is-active {
  background: var(--mainColor);
  border-color: var(--mainColor);
  color: #fff;
}

.trailers__tab.is-active small {
  opacity: 0.85;
}

.trailers__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--bot-radius, 6px);
  overflow: hidden;
}

.trailers__preview {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.trailers__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.trailers__play-icon {
  position: absolute;
  inset: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: none;
        display: grid;
    width: 100%;
}

.trailers__play-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/30px no-repeat;
}

.trailers__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.8em 1.6em;
  border: 1px solid #fff;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
    
}

.trailers__play-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.trailers__iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
</style>