@charset "UTF-8";

.top-videos {
  padding: 64px 0;
  max-width: 1160px;
  width: 100%;
  margin: 0 auto
}

@media (max-width: 1440px) {
  .top-videos {
    padding: 4.4444444444vw 0;
    max-width: 80.5555555556vw
  }
}

@media (max-width: 1024px) {
  .top-videos {
    padding: 5.5989583333vw 3.6458333333vw;
    max-width: 100%
  }
}

@media (max-width: 767px) {
  .top-videos {
    padding: 11.4666666667vw 5.3333333333vw 5.3333333333vw;
    max-width: 100%
  }
}

.top-videos__lead {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding-bottom: 24px
}

@media (max-width: 1440px) {
  .top-videos__lead {
    gap: 1.1111111111vw;
    padding-bottom: 1.6666666667vw
  }
}

@media (max-width: 1024px) {
  .top-videos__lead {
    gap: 2.0833333333vw;
    padding-bottom: 3.125vw
  }
}

@media (max-width: 767px) {
  .top-videos__lead {
    flex-direction: column;
    align-items: center;
    gap: 2.1333333333vw;
    padding-bottom: 3.2vw
  }
}

.top-videos.-no-badge .top-videos__lead-text {
  align-items: center;
  text-align: center
}

.top-videos__badge {
  flex-shrink: 0;
  width: 80px;
  height: 74px
}

@media (max-width: 1440px) {
  .top-videos__badge {
    width: 5.5555555556vw;
    height: 5.1388888889vw
  }
}

@media (max-width: 1024px) {
  .top-videos__badge {
    width: 10.4166666667vw;
    height: 9.6354166667vw
  }
}

@media (max-width: 767px) {
  .top-videos__badge {
    width: 21.3333333333vw;
    height: 19.7333333333vw
  }
}

.top-videos__lead-text {
  display: flex;
  flex-direction: column;
  gap: 4px
}

@media (max-width: 1440px) {
  .top-videos__lead-text {
    gap: .2777777778vw
  }
}

@media (max-width: 1024px) {
  .top-videos__lead-text {
    gap: .5208333333vw
  }
}

@media (max-width: 767px) {
  .top-videos__lead-text {
    align-items: center;
    gap: 1.0666666667vw
  }
}

.top-videos__lead-desc {
  color: var(--clr-primary-body-bk);
  font-size: 20px;
  font-weight: 600;
  line-height: 165%;
  letter-spacing: .4px
}

@media (max-width: 1440px) {
  .top-videos__lead-desc {
    font-size: 1.3888888889vw;
    letter-spacing: .0277777778vw
  }
}

@media (max-width: 1024px) {
  .top-videos__lead-desc {
    letter-spacing: .0520833333vw
  }
}

@media (max-width: 767px) {
  .top-videos__lead-desc {
    font-size: 4.8vw;
    text-align: center;
    letter-spacing: .1066666667vw
  }
}

.top-videos__lead-title {
  color: var(--clr-body-bk-2);
  font-size: 36px;
  font-weight: 600;
  line-height: 165%;
  letter-spacing: .72px
}

@media (max-width: 1440px) {
  .top-videos__lead-title {
    font-size: 2.5vw;
    letter-spacing: .05vw
  }
}

@media (max-width: 1024px) {
  .top-videos__lead-title {
    letter-spacing: .09375vw
  }
}

@media (max-width: 767px) {
  .top-videos__lead-title {
    font-size: 7.4666666667vw;
    text-align: center;
    letter-spacing: .192vw
  }
}

.top-videos__list {
  display: flex;
  gap: 28px
}

@media (max-width: 1440px) {
  .top-videos__list {
    gap: 1.9444444444vw
  }
}

@media (max-width: 1024px) {
  .top-videos__list {
    flex-direction: column;
    align-items: center;
    gap: 3.125vw
  }
}

@media (max-width: 767px) {
  .top-videos__list {
    flex-direction: column;
    gap: 4.2666666667vw
  }
}

.top-videos__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  padding: 16px 0;
  border-radius: 32px;
  transition: opacity .3s
}

@media (max-width: 1440px) {
  .top-videos__card {
    gap: 1.1111111111vw;
    padding: 1.1111111111vw 0;
    border-radius: 2.2222222222vw
  }
}

@media (max-width: 1024px) {
  .top-videos__card {
    width: 60.9375vw;
    gap: 2.0833333333vw;
    padding: 2.0833333333vw 0;
    border-radius: 4.1666666667vw
  }
}

@media (max-width: 767px) {
  .top-videos__card {
    width: 100%;
    gap: 4.2666666667vw;
    padding: 4.2666666667vw 0;
    border-radius: 8.5333333333vw
  }
}

.top-videos__card.-tealgreen {
  background: var(--clr-tealgreen)
}

.top-videos__card.-y-orcher {
  background: var(--clr-y-orcher)
}

.top-videos__card.-dull-rose {
  background: var(--clr-dull-rose)
}

.top-videos__card-thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 336/189;
  padding: 0 16px;
  background: none;
  border: none;
  cursor: pointer
}

@media (max-width: 1440px) {
  .top-videos__card-thumb {
    padding: 0 1.1111111111vw
  }
}

@media (max-width: 1024px) {
  .top-videos__card-thumb {
    padding: 0 2.0833333333vw
  }
}

@media (max-width: 767px) {
  .top-videos__card-thumb {
    padding: 0 4.2666666667vw
  }
}

.top-videos__card-thumb:hover .top-videos__card-thumb-img {
  opacity: .7
}

.top-videos__card-thumb:hover .top-videos__card-play-icon {
  background: var(--clr-focus-mint)
}

@media (max-width: 1024px) {
  .top-videos__card-thumb:hover .top-videos__card-thumb-img {
    opacity: 1
  }

  .top-videos__card-thumb:hover .top-videos__card-play-icon {
    background: var(--clr-bg)
  }
}

.top-videos__card-thumb-img {
  display: block;
  position: absolute;
  top: 0;
  left: 16px;
  width: calc(100% - 32px);
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: opacity .3s;
  border: 1px solid var(--clr-primary-body-bk);
  border-radius: 24px
}

@media (max-width: 1440px) {
  .top-videos__card-thumb-img {
    left: 1.1111111111vw;
    width: calc(100% - 2.2222222222vw);
    border-radius: 1.6666666667vw
  }
}

@media (max-width: 1024px) {
  .top-videos__card-thumb-img {
    left: 2.0833333333vw;
    width: calc(100% - 4.1666666667vw);
    border-radius: 3.125vw
  }
}

@media (max-width: 767px) {
  .top-videos__card-thumb-img {
    left: 4.2666666667vw;
    width: calc(100% - 8.5333333333vw);
    border-radius: 6.4vw
  }
}

.top-videos__card-play {
  position: absolute;
  right: 28px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px
}

@media (max-width: 1440px) {
  .top-videos__card-play {
    right: 1.9444444444vw;
    bottom: .8333333333vw;
    gap: .5555555556vw
  }
}

@media (max-width: 1024px) {
  .top-videos__card-play {
    right: 3.6458333333vw;
    bottom: 1.5625vw;
    gap: 1.0416666667vw
  }
}

@media (max-width: 767px) {
  .top-videos__card-play {
    right: 7.4666666667vw;
    bottom: 3.2vw;
    gap: 2.1333333333vw
  }
}

.top-videos__card-play-text {
  color: var(--clr-bg);
  transition: color .3s;
  font-size: 18px;
  font-weight: 600;
  line-height: 165%;
  letter-spacing: .36px
}

@media (max-width: 1440px) {
  .top-videos__card-play-text {
    font-size: 1.25vw;
    letter-spacing: .025vw
  }
}

@media (max-width: 1024px) {
  .top-videos__card-play-text {
    font-size: 2.34375vw;
    letter-spacing: .046875vw
  }
}

@media (max-width: 767px) {
  .top-videos__card-play-text {
    font-size: 4.8vw;
    letter-spacing: .096vw
  }
}

.top-videos__card-play-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-primary-deep-blue);
  border-radius: 50%;
  transition: background-color .3s
}

@media (max-width: 1440px) {
  .top-videos__card-play-icon {
    width: 2.7777777778vw;
    height: 2.7777777778vw
  }
}

@media (max-width: 1024px) {
  .top-videos__card-play-icon {
    width: 5.2083333333vw;
    height: 5.2083333333vw
  }
}

@media (max-width: 767px) {
  .top-videos__card-play-icon {
    width: 10.6666666667vw;
    height: 10.6666666667vw
  }
}

.top-videos__card-play-icon img {
  width: 100%;
  height: 100%
}

.top-videos__card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 16px
}

@media (max-width: 1440px) {
  .top-videos__card-body {
    gap: .8333333333vw;
    padding: 0 1.1111111111vw
  }
}

@media (max-width: 1024px) {
  .top-videos__card-body {
    gap: 1.5625vw;
    padding: 0 2.0833333333vw
  }
}

@media (max-width: 767px) {
  .top-videos__card-body {
    gap: 3.2vw;
    padding: 0 4.2666666667vw
  }
}

.top-videos__card-title {
  text-align: center;
  color: var(--clr-bg);
  font-size: 20px;
  font-weight: 600;
  line-height: 165%;
  letter-spacing: .4px
}

@media (max-width: 1440px) {
  .top-videos__card-title {
    font-size: 1.3888888889vw;
    letter-spacing: .0277777778vw
  }
}

@media (max-width: 1024px) {
  .top-videos__card-title {
    letter-spacing: .0520833333vw
  }
}

@media (max-width: 767px) {
  .top-videos__card-title {
    font-size: 1.125em;
    letter-spacing: .096vw
  }
}

.top-videos__card-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 16px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-primary-deep-blue);
  border-radius: 24px;
  box-shadow: 0 2px 0 0 var(--clr-shadow-blue);
  transition: background-color .3s
}

@media (max-width: 1440px) {
  .top-videos__card-btn {
    padding: .5555555556vw 1.1111111111vw;
    border-radius: 1.6666666667vw
  }
}

@media (max-width: 1024px) {
  .top-videos__card-btn {
    gap: 1.0416666667vw;
    padding: .5208333333vw 1.0416666667vw .5208333333vw 1.5625vw;
    border-radius: 3.125vw
  }
}

@media (max-width: 767px) {
  .top-videos__card-btn {
    gap: 2.1333333333vw;
    padding: 3.2vw 4.2666666667vw 3.2vw 3.2vw;
    border-radius: 6.4vw
  }
}

.top-videos__card-btn:hover {
  background: var(--clr-focus-mint)
}

.top-videos__card-btn:hover .top-videos__card-btn-arrow {
  transform: translate(4px)
}

@media (max-width: 1024px) {
  .top-videos__card-btn:hover {
    background: var(--clr-bg)
  }

  .top-videos__card-btn:hover .top-videos__card-btn-arrow {
    transform: unset
  }
}

.top-videos__card-btn-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 50%
}

@media (max-width: 1440px) {
  .top-videos__card-btn-icon {
    padding: .6944444444vw
  }
}

@media (max-width: 1024px) {
  .top-videos__card-btn-icon {
    padding: 1.3020833333vw
  }
}

@media (max-width: 767px) {
  .top-videos__card-btn-icon {
    padding: 2.6666666667vw
  }
}

.top-videos__card-btn-icon img {
  width: 24px;
  height: 24px
}

@media (max-width: 1440px) {
  .top-videos__card-btn-icon img {
    width: 1.6666666667vw;
    height: 1.6666666667vw
  }
}

@media (max-width: 1024px) {
  .top-videos__card-btn-icon img {
    width: 3.125vw;
    height: 3.125vw
  }
}

@media (max-width: 767px) {
  .top-videos__card-btn-icon img {
    width: 6.4vw;
    height: 6.4vw
  }
}

.top-videos__card-btn-text {
  flex-shrink: 0;
  margin-left: 8px;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 600;
  line-height: 125%;
  letter-spacing: .36px
}

@media (max-width: 1440px) {
  .top-videos__card-btn-text {
    margin-left: .5555555556vw;
    font-size: 1.25vw;
    letter-spacing: .025vw
  }
}

@media (max-width: 1024px) {
  .top-videos__card-btn-text {
    margin-left: 0;
    font-size: 2.34375vw;
    letter-spacing: .046875vw
  }
}

@media (max-width: 767px) {
  .top-videos__card-btn-text {
    margin-left: 0;
    font-size: 4.8vw;
    letter-spacing: .096vw
  }
}

.top-videos__card-btn-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: auto;
  transition: transform .3s
}

@media (max-width: 1440px) {
  .top-videos__card-btn-arrow {
    width: 1.3888888889vw;
    height: 1.3888888889vw
  }
}

@media (max-width: 1024px) {
  .top-videos__card-btn-arrow {
    width: 2.6041666667vw;
    height: 2.6041666667vw
  }
}

@media (max-width: 767px) {
  .top-videos__card-btn-arrow {
    width: 5.3333333333vw;
    height: 5.3333333333vw
  }
}

.top-videos__card-btn-arrow img {
  width: 100%;
  height: 100%
}

.top-videos__card-btn-arrow-icon {
  transform: rotate(-90deg)
}

.top-videos__card.-tealgreen .top-videos__card-btn-icon, .top-videos__card-btn.-tealgreen .top-videos__card-btn-icon {
  background: var(--clr-tealgreen)
}

.top-videos__card.-tealgreen .top-videos__card-btn-text, .top-videos__card-btn.-tealgreen .top-videos__card-btn-text {
  color: var(--clr-tealgreen)
}

.top-videos__card.-tealgreen .top-videos__card-btn:hover, .top-videos__card-btn.-tealgreen:hover {
  background: var(--clr-tealgreen-150)
}

.top-videos__card.-tealgreen .top-videos__card-btn:hover .top-videos__card-btn-text, .top-videos__card-btn.-tealgreen:hover .top-videos__card-btn-text {
  color: var(--clr-primary-body-bk)
}

@media (max-width: 1024px) {
  .top-videos__card.-tealgreen .top-videos__card-btn:hover, .top-videos__card-btn.-tealgreen:hover {
    background: var(--clr-bg)
  }

  .top-videos__card.-tealgreen .top-videos__card-btn:hover .top-videos__card-btn-text, .top-videos__card-btn.-tealgreen:hover .top-videos__card-btn-text {
    color: var(--clr-tealgreen)
  }
}

.top-videos__card.-y-orcher .top-videos__card-btn-icon, .top-videos__card-btn.-y-orcher .top-videos__card-btn-icon {
  background: var(--clr-y-orcher)
}

.top-videos__card.-y-orcher .top-videos__card-btn-text, .top-videos__card-btn.-y-orcher .top-videos__card-btn-text {
  color: var(--clr-y-orcher-hovered)
}

.top-videos__card.-y-orcher .top-videos__card-btn:hover, .top-videos__card-btn.-y-orcher:hover {
  background: var(--clr-y-orcher-150)
}

.top-videos__card.-y-orcher .top-videos__card-btn:hover .top-videos__card-btn-text, .top-videos__card-btn.-y-orcher:hover .top-videos__card-btn-text {
  color: var(--clr-primary-body-bk)
}

@media (max-width: 1024px) {
  .top-videos__card.-y-orcher .top-videos__card-btn:hover, .top-videos__card-btn.-y-orcher:hover {
    background: var(--clr-bg)
  }

  .top-videos__card.-y-orcher .top-videos__card-btn:hover .top-videos__card-btn-text, .top-videos__card-btn.-y-orcher:hover .top-videos__card-btn-text {
    color: var(--clr-y-orcher-hovered)
  }
}

.top-videos__card.-dull-rose .top-videos__card-btn-icon, .top-videos__card-btn.-dull-rose .top-videos__card-btn-icon {
  background: var(--clr-dull-rose)
}

.top-videos__card.-dull-rose .top-videos__card-btn-text, .top-videos__card-btn.-dull-rose .top-videos__card-btn-text {
  color: var(--clr-dull-rose-hovered)
}

.top-videos__card.-dull-rose .top-videos__card-btn:hover, .top-videos__card-btn.-dull-rose:hover {
  background: var(--clr-dull-rose-150)
}

.top-videos__card.-dull-rose .top-videos__card-btn:hover .top-videos__card-btn-text, .top-videos__card-btn.-dull-rose:hover .top-videos__card-btn-text {
  color: var(--clr-primary-body-bk)
}

@media (max-width: 1024px) {
  .top-videos__card.-dull-rose .top-videos__card-btn:hover, .top-videos__card-btn.-dull-rose:hover {
    background: var(--clr-bg)
  }

  .top-videos__card.-dull-rose .top-videos__card-btn:hover .top-videos__card-btn-text, .top-videos__card-btn.-dull-rose:hover .top-videos__card-btn-text {
    color: var(--clr-dull-rose-hovered)
  }
}