/* ==========================================================================
   2カラム動画
   ※ 元: Next.js の CSS Modules（SCSS）を素のCSSに変換
   ========================================================================== */

/* --------------------------------------------------------------------------
   .two-column-videos（元: src/components/common/TwoColumnVideos/TwoColumnVideos.module.scss）
   -------------------------------------------------------------------------- */

.two-column-videos {
  display: flex;
  justify-content: center;
  gap: 0;
  /* @media (max-width: $breakpoint-md) { */
  /* display: grid; */
  /* grid-template-columns: 1fr; */
  /* gap: 0; */
  /* } */
}

@media (max-width: 640px) {
  .two-column-videos {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 4vw;
    width: 90%;
    margin-inline: auto;
    margin-bottom: 4vw;
  }
}

.two-column-videos__video-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 555/350;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .two-column-videos__video-wrapper {
    width: 100%;
    height: 300px;
  }
}

@media (max-width: 768px) {
  .two-column-videos__video-wrapper {
    height: 200px;
  }
}

@media (max-width: 640px) {
  .two-column-videos__video-wrapper {
    height: auto;
  }
}

.two-column-videos__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}