.production-videos {
  padding: 80px 40px;
  border-radius: 20px;
  background: #f4f9ff;
}


.production-videos__inner {
width: min(100%, 1500px);
margin: 0 auto;

display: grid;

grid-template-columns:
  repeat(2, minmax(0, 1fr));

gap: 50px 36px;

align-items: start;
}


/* =========================
 VIDEO CARD
 ========================= */

.video-card {
min-width: 0;
}


.video-card__title {
margin: 0 0 18px;

line-height: 1.25;
font-weight: 700;
}


/* =========================
 VIDEO
 ========================= */

.video-card__media {
position: relative;

width: 100%;

aspect-ratio: 9 / 16;

overflow: hidden;

border-radius: 22px;

background: #111;
}


.production-video {
position: relative;
z-index: 0;

display: block;

width: 100%;
height: 100%;

object-fit: cover;

background: #111;

cursor: pointer;
}


/* =========================
 PLAY BUTTON
 ========================= */

.video-card__play {
position: absolute;

z-index: 3;

top: 50%;
left: 50%;

width: 76px;
height: 76px;

transform: translate(-50%, -50%);

display: flex;

align-items: center;
justify-content: center;

padding: 0;

border: 0;
border-radius: 50%;

background: rgba(255, 255, 255, 0.94);

box-shadow:
  0 10px 30px rgba(0, 0, 0, 0.18);

cursor: pointer;

transition:
  transform 0.2s ease,
  opacity 0.2s ease,
  background 0.2s ease;
}


.video-card__play:hover {
transform:
  translate(-50%, -50%)
  scale(1.08);

background: #fff;
}


.video-card__play-icon {
width: 0;
height: 0;

margin-left: 6px;

border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 16px solid #111;
}


/* =========================
 LOADER
 ========================= */

.video-card__loader {
position: absolute;

z-index: 4;

top: 50%;
left: 50%;

width: 76px;
height: 76px;

transform: translate(-50%, -50%);

display: flex;

align-items: center;
justify-content: center;

border-radius: 50%;

background: rgba(0, 0, 0, 0.65);

opacity: 0;
visibility: hidden;

pointer-events: none;

transition:
  opacity 0.2s ease,
  visibility 0.2s ease;
}


.video-card__loader span {
width: 30px;
height: 30px;

border: 3px solid rgba(255, 255, 255, 0.25);

border-top-color: #fff;

border-radius: 50%;

animation:
  videoLoader
  0.75s
  linear
  infinite;
}


@keyframes videoLoader {
to {
  transform: rotate(360deg);
}
}


/* =========================
 VIDEO STATES
 ========================= */

.video-card__media.is-loading
.video-card__loader {
opacity: 1;
visibility: visible;
}


.video-card__media.is-loading
.video-card__play {
opacity: 0;

pointer-events: none;
}


.video-card__media.is-playing
.video-card__play {
opacity: 0;

pointer-events: none;
}


/* =========================
 VIDEO HOVER
 ========================= */

.video-card__media::after {
content: "";

position: absolute;

z-index: 1;

inset: 0;

background: rgba(0, 0, 0, 0);

pointer-events: none;

transition:
  background 0.25s ease;
}


.video-card__media:not(.is-playing):not(.is-loading):hover::after {
background:
  rgba(0, 0, 0, 0.08);
}


/* =========================
 VIDEO CAPTION
 ========================= */

.video-card__caption {
margin: 16px 0 0;

max-width: 100%;

line-height: 1.55;
}


/* =========================
 ABOUT
 ========================= */

.production-about {
grid-column: 1 / -1;

padding-top: 20px;
}


.production-about__label {
display: inline-block;

margin-bottom: 18px;

line-height: 1;

font-weight: 700;

letter-spacing: 0.12em;
background: linear-gradient(90deg, #003A6B 0%, #1A4E8A 40%, #FF7A00 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

text-transform: uppercase;
}


.production-about__title {
max-width: 900px;

margin: 0 0 30px;

line-height: 0.98;

font-weight: 700;

letter-spacing: -0.035em;
background: linear-gradient(90deg, #003A6B 0%, #1A4E8A 40%, #FF7A00 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}


.production-about__text {
max-width: 1000px;

line-height: 1.7;
}


.production-about__text p {
margin: 0 0 20px;
}


/* =========================
 FEATURES
 ========================= */

.production-about__features {
display: grid;

grid-template-columns:
  repeat(3, 1fr);

gap: 20px;

margin-top: 42px;

padding-top: 26px;

border-top:
  1px solid
  rgba(0, 0, 0, 0.13);
}


.production-about__features div {
display: flex;

flex-direction: column;

gap: 5px;
}


.production-about__features strong {
font-weight: 700;
}


.production-about__features span {
line-height: 1.4;
}


/* =========================
 TABLET
 ========================= */

@media (max-width: 900px) {

.production-videos {
  padding: 60px 30px;
}


.production-videos__inner {
  gap: 40px 24px;
}

}


/* =========================
 MOBILE
 ========================= */

@media (max-width: 700px) {

.production-videos {
  padding: 50px 20px;
}


.production-videos__inner {
  display: flex;

  flex-direction: column;

  gap: 45px;
}


.video-card {
  width: 100%;

  max-width: 390px;

  margin: 0 auto;
}


.production-about {
  width: 100%;

  padding: 0;
}


.production-about__title {
  margin-bottom: 24px;

  line-height: 1.04;
}


.production-about__features {
  grid-template-columns:
    1fr 1fr;
}


.video-card__play,
.video-card__loader {
  width: 66px;
  height: 66px;
}


.video-card__loader span {
  width: 26px;
  height: 26px;
}

}