/* ------------------------------- 
 * Media page list
 * ------------------------------- */

.media-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url('../assets/media-image.png');

  background-size: cover;

  gap: 32px;
  height: 660px;
}

.media-page-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 32px;

  width: 288px;
  height: 112px;
}

.media-title {
  font-weight: 900;
  font-size: 32px;
}

.text-below-media-title {
  /* text-align: left; */
  font-size: 16px;
}

@media (min-width: 544px) {
  .media-page {
    height: 1024px;
  }

  .media-page-content {
    width: 384px;
    height: 148px;
  }

  .media-title {
    font-size: 48px;
  }

  .text-below-media-title {
    font-size: 22px;
  }
}

@media (min-width: 768px) {
  .media-page-content {
    width: 608px;
    height: 165px;
  }

  .media-title {
    font-size: 80px;
  }

  .text-below-media-title {
    font-size: 26px;
  }
}

@media (min-width: 1012px) {
  .media-page-content {
    width: 896px;
    height: 180px;
  }

  .media-title {
    font-size: 90px;
  }

  .text-below-media-title {
    font-size: 28px;
  }
}

@media (min-width: 1280px) {
  .media-page-content {
    width: 896px;
    height: 192px;
  }

  .media-title {
    font-size: 96px;
  }

  .text-below-media-title {
    font-size: 32px;
  }
}

/* ------------------------------- 
 * View Media list
 * ------------------------------- */

.media-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 160px 16px;
  font-family: Inter;
  font-size: 16px;
  background: linear-gradient(180deg, #fff5d5 0%, rgba(255, 250, 236, 0) 100%);

  gap: 224px;
  height: 7331px;
}

.media-view-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  /* gap: 80px; */

  width: 288px;
  /* height: 1139px; */
}

.media-view-title {
  font-family: Lexend;
  font-weight: 900;
  font-size: 48px;
  margin-bottom: 80px;
}

.media-caption {
  font-family: Inter;
  margin-top: 32px;
  line-height: 200%;
}

.video-link {
  width: 288px;
  height: 161px;
}

.video-link-2 {
  margin-top: 160px;
}

.media-image {
  margin-bottom: 16px;
}

.image-caption {
  font-family: Inter;
  line-height: 200%;
  margin-top: 32px;
  margin-bottom: 80px;
}

.last-image-caption {
  font-family: Inter;
  line-height: 200%;
  margin-top: 32px;
}

.presentation-font {
  font-size: 32px;
}

.presentation-list {
  font-family: Inter;
  line-height: 200%;
  margin-left: -18px;
  margin-bottom: 36px;
}

@media (min-width: 544px) {
  .media-view {
    padding: 160px 32px;
    height: 9890px;
    font-size: 20px;
  }

  .media-view-content {
    width: 480px;
  }

  .video-link {
    width: 480px;
    height: 269px;
  }

}

@media (min-width: 768px) {
  .media-view {
    padding: 224px 80px;
    height: 11325px;
    font-size: 20px;
  }

  .media-view-content {
    width: 608px;
  }

  .media-view-title {
    font-size: 64px;
  }

  .video-link {
    width: 598px;
    height: 335px;
  }

}

@media (min-width: 1012px) {
  .media-view {
    padding: 336px 80px;
    height: 8235px;
    gap: 448px;
  }

  .media-view-content {
    width: 852px;
  }

  .media-view-title {
    font-size: 72px;
  }

  .flex-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    width: 852px;
  }

  .video-link {
    width: 852px;
    height: 477px;
  }
}

@media (min-width: 1280px) {
  .media-view {
    padding: 336px 80px;
    height: 8392px;
  }

  .media-view-content {
    width: 896px;
  }

  .flex-row {
    width: 889px;
  }

  .video-link {
    width: 896px;
    height: 502px;
  }
}