.videos {
  padding: 5.5rem clamp(1.25rem, 6vw, 5rem) 6.5rem;
}

.videos__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  margin: 0 auto 2.5rem;
  max-width: 34rem;
}

.videos__head h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  margin-bottom: 0;
}

.videos__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1.1rem;
}

.videos__item {
  flex: 0 1 220px;
  aspect-ratio: 9 / 16;
  max-width: 220px;
  border-radius: 22px;
  padding: 3px;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  box-shadow: 0 16px 32px -22px rgba(32, 23, 32, 0.4);
  transition: transform 0.25s ease;
}

.videos__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 19px;
}

.videos__item--featured {
  flex-basis: 250px;
  max-width: 250px;
  margin-top: -1.5rem;
  padding: 3.5px;
  background: linear-gradient(
    135deg,
    #d4af37,
    var(--text) 45%,
    var(--accent) 100%
  );
  box-shadow:
    0 20px 40px -16px rgba(212, 175, 55, 0.45),
    0 16px 32px -20px rgba(255, 61, 143, 0.5);
}

.videos__item--featured video {
  border-radius: 19.5px;
}

.videos__item--featured:hover {
  transform: translateY(-4px);
}

.videos__break {
  flex-basis: 0;
  width: 0;
  height: 0;
}

@media (max-width: 1024px) {
  .videos__break {
    flex-basis: 100%;
  }
}

@media (max-width: 768px) {
  .videos__item {
    flex-basis: 170px;
    max-width: 170px;
  }

  .videos__item--featured {
    flex-basis: 195px;
    max-width: 195px;
    margin-top: -1.1rem;
  }
}

@media (max-width: 480px) {
  .videos {
    padding: 4rem 1.25rem 4.5rem;
  }

  .videos__break {
    display: none;
  }

  .videos__grid {
    gap: 0.75rem;
  }

  .videos__item {
    flex-basis: calc(50% - 0.4rem);
    max-width: calc(50% - 0.4rem);
  }

  .videos__item--featured {
    order: -1;
    flex-basis: 62%;
    max-width: 220px;
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 320px) {
  .videos__grid {
    gap: 0.6rem;
  }

  .videos__item {
    flex-basis: calc(50% - 0.3rem);
    max-width: calc(50% - 0.3rem);
  }

  .videos__item--featured {
    flex-basis: 70%;
    max-width: 190px;
  }
}