/* content section */
@media screen and (min-width: 741px) {
  .content-section {
    padding-top: clamp(
      calc((250 - (250 * 0.19)) * 1px),
      calc(250 / var(--layout-total-width) * 100 * 1vw),
      250px
    );
  }
  .has-vtc-pd + .content-section {
    padding-top: 0;
  }
  .content-inner {
    width: calc(var(--layout-width) + (var(--layout-padding-x) * 2));
  }
}

/* cmpnt-typo-visual */
@media screen and (min-width: 741px) {
  .cmpnt-typo-visual .area-visual.align-right {
    display: flex;
    justify-content: flex-end;
  }
  .cmpnt-typo-visual {
    position: relative;
  }
  .cmpnt-typo-visual .area-typo {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .cmpnt-typo-visual .area-typo .title {
    font-size: var(--title-xl);
    line-height: 0.86;
  }
  .cmpnt-typo-visual .box-media {
    width: clamp(
      calc((1440 - (1440 * 0.19)) * 1px),
      calc(1440 / 19.2 * 1vw),
      100vw
    );
    height: clamp(
      calc((757 - (757 * 0.19)) * 1px),
      calc(757 / 19.2 * 1vw),
      1000vw
    );
  }
  .cmpnt-typo-visual .box-media img {
    height: 100%;
  }
  .cmpnt-typo-visual.text-pos-bottom {
    padding-bottom: calc(193 / 19.2 * 1vw);
  }
  .cmpnt-typo-visual.text-pos-bottom .area-typo {
    align-items: flex-end;
  }
  .cmpnt-typo-visual.text-pos-center .area-typo {
    align-items: center;
  }
}
@media screen and (max-width: 740px) {
  .cmpnt-typo-visual {
    position: relative;
  }
  .cmpnt-typo-visual .area-typo {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    padding-bottom: calc(30 / var(--screen-w) * 100 * 1vw);
    color: #fff;
  }
  .cmpnt-typo-visual .area-typo .title {
    font-size: var(--title-xs);
    margin-top: calc(10 / var(--screen-w) * 100 * 1vw);
  }
  .cmpnt-typo-visual .area-typo .desc-md {
    font-family: var(--head-regular);
  }
  .cmpnt-typo-visual .box-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: calc(20 / var(--screen-w) * 100 * 1vw);
  }
}

/* roblox */
@media screen and (min-width: 741px) {
  .content-section.roblox {
    background: linear-gradient(
      180deg,
      #fff 80.68%,
      rgba(164, 105, 239, 0.6) 91.48%,
      #3757ff 97.46%
    );
  }
  .content-section.roblox .cmpnt-shuffle-imgs .area-shuffle-img {
    height: clamp(
      calc((978 - (978 * 0.19)) * 1px),
      calc(978 / var(--layout-total-width) * 100 * 1vw),
      978px
    );
  }
  .content-section.roblox .shuffle-img:nth-child(1) {
    top: 0;
    left: clamp(
      calc((400 - (400 * 0.19)) * 1px),
      calc(400 / var(--layout-total-width) * 100 * 1vw),
      400px
    );;
    width: clamp(
      calc((720 - (720 * 0.19)) * 1px),
      calc(720 / var(--layout-total-width) * 100 * 1vw),
      720px
    );
  }
  .content-section.roblox .shuffle-img:nth-child(2) {
    top: clamp(
      calc((234 - (234 * 0.19)) * 1px),
      calc(234 / var(--layout-total-width) * 100 * 1vw),
      234px
    );
    left: 0;
    width: clamp(
      calc((496 - (496 * 0.19)) * 1px),
      calc(496 / var(--layout-total-width) * 100 * 1vw),
      496px
    );
  }
  .content-section.roblox .shuffle-img:nth-child(3) {
    bottom: 0;
    left: 0;
    z-index: 1;
    width: clamp(
      calc((640 - (640 * 0.19)) * 1px),
      calc(640 / var(--layout-total-width) * 100 * 1vw),
      640px
    );
  }
  .content-section.roblox .shuffle-img:nth-child(4) {
    left: calc(
      50% +
        clamp(
          calc((136 - (136 * 0.19)) * 1px),
          calc(136 / var(--layout-total-width) * 100 * 1vw),
          136px
        )
    );
    bottom: clamp(
      calc((104 - (104 * 0.19)) * 1px),
      calc(104 / var(--layout-total-width) * 100 * 1vw),
      104px
    );
    width: clamp(
      calc((368 - (368 * 0.19)) * 1px),
      calc(368 / var(--layout-total-width) * 100 * 1vw),
      368px
    );
  }
}

/* zepeto */
@media screen and (min-width: 741px) {
  .content-section.zepeto {
    background: linear-gradient(
      180deg,
      #fff 80.68%,
      rgba(239, 105, 153, 0.6) 91.48%,
      #ff374f 97.46%
    );
  }
  .content-section.zepeto .cmpnt-shuffle-imgs .area-shuffle-img {
    height: clamp(
      calc((1107 - (1107 * 0.19)) * 1px),
      calc(1107 / var(--layout-total-width) * 100 * 1vw),
      1107px
    );
  }
  .content-section.zepeto .shuffle-img:nth-child(1) {
    top: 0;
    left: clamp(
      calc((722 - (722 * 0.19)) * 1px),
      calc(722 / var(--layout-total-width) * 100 * 1vw),
      722px
    );
    width: clamp(
      calc((398 - (398 * 0.19)) * 1px),
      calc(398 / var(--layout-total-width) * 100 * 1vw),
      398px
    );
  }
  .content-section.zepeto .shuffle-img:nth-child(2) {
    top: clamp(
      calc((98 - (98 * 0.19)) * 1px),
      calc(98 / var(--layout-total-width) * 100 * 1vw),
      98px
    );
    left: 0;
    width: clamp(
      calc((665 - (665 * 0.19)) * 1px),
      calc(665 / var(--layout-total-width) * 100 * 1vw),
      665px
    );
  }
  .content-section.zepeto .shuffle-img:nth-child(3) {
    bottom: clamp(
      calc((185 - (185 * 0.19)) * 1px),
      calc(185 / var(--layout-total-width) * 100 * 1vw),
      185px
    );
    left: clamp(
      calc((400 - (400 * 0.19)) * 1px),
      calc(400 / var(--layout-total-width) * 100 * 1vw),
      400px
    );
    width: clamp(
      calc((721 - (721 * 0.19)) * 1px),
      calc(721 / var(--layout-total-width) * 100 * 1vw),
      721px
    );
  }
  .content-section.zepeto .shuffle-img:nth-child(4) {
    left: clamp(
      calc((56 - (56 * 0.19)) * 1px),
      calc(56 / var(--layout-total-width) * 100 * 1vw),
      56px
    );
    bottom: 0;
    width: clamp(
      calc((463 - (463 * 0.19)) * 1px),
      calc(463 / var(--layout-total-width) * 100 * 1vw),
      463px
    );
  }
}

/* nft */
/* min 1240px max var(--layout-total-width) 기준 */
@media screen and (min-width: 741px) {
  .content-section.nft {
    background: url("/content/dam/hyundai/ww/en/images/company/metaverse/index/nft-section-bg-pc.jpg")
      center / cover no-repeat;
    color: #fff;
  }
  .content-section.nft .cmpnt-shuffle-imgs .area-shuffle-img {
    height: clamp(
      calc((1424 - (1424 * 0.19)) * 1px),
      calc(1424 / var(--layout-total-width) * 100 * 1vw),
      1424px
    );
  }
  .content-section.nft .shuffle-img:nth-child(1) {
    top: 0;
    left: 0;
    width: clamp(
      calc((344 - (344 * 0.19)) * 1px),
      calc(344 / var(--layout-total-width) * 100 * 1vw),
      344px);
  }
  .content-section.nft .shuffle-img:nth-child(2) {
    top: 0;
    left: clamp(
      calc((401 - (401 * 0.19)) * 1px),
      calc(401 / var(--layout-total-width) * 100 * 1vw),
      401px
    );
    width: clamp(
      calc((608 - (608 * 0.19)) * 1px),
      calc(608 / var(--layout-total-width) * 100 * 1vw),
      608px
    );
    height: clamp(
      calc((616 - (616 * 0.19)) * 1px),
      calc(616 / var(--layout-total-width) * 100 * 1vw),
      616px
    );
  }
  .content-section.nft .shuffle-img:nth-child(3) {
    top: clamp(
      calc((524 - (524 * 0.19)) * 1px),
      calc(524 / var(--layout-total-width) * 100 * 1vw),
      524px
    );
    left: clamp(
      calc((56 - (56 * 0.19)) * 1px),
      calc(56 / var(--layout-total-width) * 100 * 1vw),
      56px
    );
    width: clamp(
      calc((496 - (496 * 0.19)) * 1px),
      calc(496 / var(--layout-total-width) * 100 * 1vw),
      496px
    );
  }
  .content-section.nft .shuffle-img:nth-child(4) {
    left: clamp(
      calc((608 - (608 * 0.19)) * 1px),
      calc(608 / var(--layout-total-width) * 100 * 1vw),
      608px
    );
    bottom: clamp(
      calc((432 - (432 * 0.19)) * 1px),
      calc(432 / var(--layout-total-width) * 100 * 1vw),
      432px
    );
    z-index: 1;
    width: clamp(
      calc((320 - (320 * 0.19)) * 1px),
      calc(320 / var(--layout-total-width) * 100 * 1vw),
      320px
    );
  }
  .content-section.nft .shuffle-img:nth-child(5) {
    left: 0;
    bottom: 0;
    width: clamp(
      calc((432 - (432 * 0.19)) * 1px),
      calc(432 / var(--layout-total-width) * 100 * 1vw),
      432px
    );
  }
  .content-section.nft .shuffle-img:nth-child(6) {
    left: clamp(
      calc((722 - (722 * 0.19)) * 1px),
      calc(722 / var(--layout-total-width) * 100 * 1vw),
      722px
    );;
    bottom: 0;
    width: clamp(
      calc((389 - (389 * 0.19)) * 1px),
      calc(389 / var(--layout-total-width) * 100 * 1vw),
      389px
    );
  }
}