@import '../../scss/variables.scss';

.medias-container {
  .media-wrapper {
    text-decoration: none;
    width: 100%;

    &:hover {
      .media-title {
        color: $color-secondary !important;
      }
    }
  }

  .youtube-video {
    padding-top: calc(56.25%); // aspect-ratio: 16:9
    position: relative;
    width: 100%;

    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  .media-details {
    min-height: 90px;
    padding: 12px;
    width: 100%;
  }

  .large {
    .youtube-video {
      padding-top: calc(56.25% / 2); // aspect-ratio: 16:9
      position: relative;
      width: 50%;
    }

    .media-details {
      margin-left: 10px;
      padding: 16px;
      width: calc(50% - 10px);
    }
  }
}

.media-wrapper {
  border: 1px solid var(--color-border);
  position: relative;
  padding-bottom: 40px;
  border-radius: 5px;
}

.media-card-bottom {
  border-top: 1px solid #f3f3f6;
  padding-top: 10px;
  padding-bottom: 10px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.media-img-wrapper {
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}

.media-img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.2s all ease-in;
  border-radius: 5px;
}

.media-img-wrapper:hover img {
  filter: brightness(0.75);
}

@media screen and (max-width: 767px) {
  .large {
    .media-wrapper {
      flex-direction: column;

      .youtube-video {
        padding-top: calc(56.25%); // aspect-ratio: 16:9
        width: 100%;
      }

      .media-details {
        margin-left: 0;
        width: 100%;
      }
    }
  }
}