@font-face{
  font-family:"Arizona Flare";
  src:url("../fonts/arizona_flare_300_normal_headings_h1-h6.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Arizona Flare";
  src:url("../fonts/arizona_flare_300_italic_headings_h1-h6.woff2") format("woff2");
  font-weight:300; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Helveesti";
  src:url("../fonts/helveesti_400_normal_body_ui.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Helveesti";
  src:url("../fonts/helveesti_400_italic_body_ui.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Helveesti";
  src:url("../fonts/helveesti_700_normal_body_labels.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Helveesti";
  src:url("../fonts/helveesti_700_italic_body_labels.woff2") format("woff2");
  font-weight:700; font-style:italic; font-display:swap;
}

.media{
  --media-bg: #000;
  --media-frame-color: #000000;
  --media-frame-thickness: 18px;     
  --media-divider-thickness: 16px;   
  --media-content-max: 1320px;       
  --media-space-top: 80px;
  --media-space-bottom: 80px;

  --media-overlay-bg: rgba(0, 0, 0, 0.56); 
  --media-overlay-text: #ffffff;
  --media-overlay-text-size: clamp(16px, 1.6vw, 28px);
  --media-overlay-text-ls: 0.08em;
  --media-overlay-fade: 220ms;

  background: var(--media-bg);
  font-family: "Helveesti", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding-block: 0;
}

.media__frame{
  position: relative;
  box-sizing: border-box;
  margin: var(--media-space-top) auto var(--media-space-bottom);
  max-width: var(--media-content-max);
  background: var(--media-frame-color);
  /*padding: var(--media-frame-thickness);*/

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.media__frame::before{
  content: "";
  position: absolute;
  left: 50%;
  top: var(--media-frame-thickness);
  bottom: var(--media-frame-thickness);
  width: var(--media-divider-thickness);
  background: var(--media-frame-color);
  transform: translateX(-50%);
  pointer-events: none;
}

.media__item{
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  line-height: 0;
}

.media__link{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.media__link img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1); 
  transition: transform var(--media-overlay-fade) ease-out;
}

.media__overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--media-overlay-bg);
  opacity: 0;
  transition: opacity var(--media-overlay-fade) ease-out;
}

.media__overlay-text{
  color: var(--media-overlay-text);
  font-family: "Helveesti", sans-serif;
  font-weight: 400;
  letter-spacing: var(--media-overlay-text-ls);
  font-size: var(--media-overlay-text-size);
  text-transform: uppercase;
}

.media__link:hover .media__overlay,
.media__link:focus-visible .media__overlay{
  opacity: 1;
}

.media__link:hover img,
.media__link:focus-visible img{
  transform: scale(1.02);
}

.media__link:focus-visible{
  outline: 3px solid #ffffff;
  outline-offset: -3px; 
}

.media figure,
.media__item{
  margin: 0;    
}

@media (max-width: 430px){
  .media{
    --media-frame-thickness: 10px;
    --media-divider-thickness: 0px;   
    --media-content-max: 100%;
    --media-space-top: 32px;
    --media-space-bottom: 48px;

    --media-overlay-text-size: clamp(14px, 4.2vw, 18px);
  }

  .media__frame{
    margin: var(--media-space-top) 6px var(--media-space-bottom);
    padding: var(--media-frame-thickness);

    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .media__frame::before{
    content: none;
  }

  .media__item{
    aspect-ratio: 16 / 9;
  }
  .media__link:focus-visible{
    outline-offset: -2px;
  }

  .media__link:hover img,
  .media__link:focus-visible img{
    transform: none;
  }
}