.video-section {
  .wrapper {
    display: flex;
    align-items: center;
    gap: 4.8rem;

    .content,
    .media-wrapper {
      flex: 1;
      min-width: 0;
    }

    .media-wrapper {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.2rem;
      overflow: hidden;
      max-width: 420px;

      .media {
        width: 100%;
        height: auto;
        display: block;
      }
    }

    .media-wrapper--single {
      grid-template-columns: 1fr;
    }

    .content .button {
      margin-block-start: 3rem !important;
    }

    @media (max-width: 900px) {
      flex-direction: column;

      .content,
      .media-wrapper {
        width: 100%;
      }

      .media-wrapper {
        max-width: none;
      }
    }

    @media (max-width: 700px) {
      .media-wrapper {
        grid-template-columns: 1fr;
      }
    }
  }
}