@use "../custom" as *;

.order {
  margin-top: -150px;
  margin-bottom: 12.5rem;
  &__wrapper {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    justify-content: space-between;

    @include media-breakpoint-down(lg) {
      flex-direction: column;
    }
  }

  &__left {
    max-width: 72rem;
    width: 100%;
    padding: 3.125rem 1.875rem;
    border-radius: 1.5rem;
    background-color: $purple;
    position: relative;
    overflow: hidden;
    min-height: 20rem;
    padding-left: 25.625rem;

    &::after {
      content: "";
      position: absolute;
      display: block;
      border-radius: 100vh;
      background-color: rgba($black, 0.1);
      width: 29.3125rem;
      height: 29.3125rem;
      left: -7.0625rem;
      bottom: -6rem;
      z-index: 0;
      position: none;
    }

    &::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: -19.1875rem;
      width: 28.5rem;
      height: 38.3125rem;
      background: no-repeat url("../images/hero-character.webp");
      background-size: contain;
      background-position: center;
      z-index: 1;
      pointer-events: none;
    }

    @media (max-width: 85rem) {
      padding-left: 1.875rem;
      &::after,
      &::before {
        display: none;
      }
    }

    @include media-breakpoint-down(md) {
      padding: 1.5rem 1rem;
      min-height: auto;
    }

    &-title {
      display: flex;
      align-items: center;
      gap: 0.375rem;
      font-weight: 500;
      font-size: 1.25rem;
      line-height: 1.5;
      color: #fff;
      font-family: $roobert;
      margin-bottom: 1.5rem;
    }

    &-wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem 0.75rem;

      @include media-breakpoint-down(md) {
        gap: 1rem;
      }
    }

    &.instagram {
      background-color: $instagram;
    }
    &.tiktok {
      background-color: $tiktok;
    }
    &.twitter {
      background-color: $twitter;
    }
    &.youtube {
      background-color: $youtube;
    }
    &.facebook {
      background-color: $facebook;
    }
    &.spotify {
      background-color: $spotify;
    }
    &.telegram {
      background-color: $telegram;
    }
    &.linkedin {
      background-color: $linkedin;
    }
    &.threads {
      background-color: $threads;
    }
    &.google {
      background-color: $google;
    }
    &.appstore {
      background-color: $appstore;
    }
    &.seo {
      background-color: $seo;
    }
    &.twitch {
      background-color: $twitch;
    }
    &.trovo {
      background-color: $trovo;
    }
    &.dlive {
      background-color: $dlive;
    }
    &.nonolive {
      background-color: $nonolive;
    }
    &.clubhouse {
      background-color: $clubhouse;
    }
    &.tumblr {
      background-color: $tumblr;
    }
    &.soundcloud {
      background-color: $soundcloud;
    }
    &.reddit {
      background-color: $reddit;
    }
    &.pinterest {
      background-color: $pinterest;
    }
    &.likeapp {
      background-color: $likeapp;
    }
    &.kwai {
      background-color: $kwai;
    }
    &.vimeo {
      background-color: $vimeo;
    }
    &.onlyfans {
      background-color: $onlyfans;
    }
    &.quora {
      background-color: $quora;
    }
    &.opensea {
      background-color: $opensea;
    }
    &.dailymotion {
      background-color: $dailymotion;
    }
    &.netflix {
      background-color: $netflix;
    }
    &.discord {
      background-color: $discord;
    }
    &.snapchat {
      background-color: $snapchat;
    }
    &.periscope {
      background-color: $periscope;
    }
    &.tinder {
      background-color: $tinder;
    }
    &.pubg {
      background-color: $pubg;
    }
    &.shazam {
      background-color: $shazam;
    }
  }

  &__item {
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0.75rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &-title {
      font-weight: 700;
      font-size: 1rem;
      line-height: 1.5;
      color: $white;
      font-family: $roobert;
    }

    &-desc {
      font-weight: 400;
      font-size: 0.88rem;
      line-height: 1.5;
      color: rgba($white, 0.7);
      font-family: $roobert;
    }
  }

  &__right {
    max-width: 27rem;
    width: 100%;
  }

  @include media-breakpoint-down(lg) {
    &__left,
    &__right {
      max-width: 100%;
    }
  }
}