.more-from-nexa-container {
  background: var(--primary-main);

  .main__container {
    padding-top: 24px;
    background: var(--primary-main);
    display: flex;
    flex-direction: column;

    &::after {
      @media (width < 1200px) {
        content: '';
        border-bottom: 0.5px solid rgb(255 255 255 / 0.5);
      }
    }
  }

  .title-container {
    position: relative;

    &::after {
      @media (width <1200px) {
        content: '';
        position: absolute;
        right: 0;
        height: 20px;
        width: 20px;
        background-image: url(../../icons/collapes.svg);
        top: 3px;
      }
    }

    * {
      @media (width <1200px) {
        font-size: var(--body-s-nexa, var(--body-xs-arena));
        font-weight: var(--fw-500);
        line-height: var(--lh-24px-nexa, var(--lh-18px-arena));
      }
    }
  }

  .accordion {
    @media (width <=1200px) {
      &::after {
        transform: rotate(180deg);
      }
    }
  }

  .car-list-container {
    display: flex;
    overflow: initial;
    height: auto;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;

    @media (width>=1200px) {
      align-items: center;
      gap: 40px;
      overflow: auto hidden;
      scrollbar-width: none;
      justify-content: space-between;
      height: 24px;
      padding-right: 24px;
      margin-top: 0;
      flex-direction: row;
    }

    .car-link {
      .footer-text-medium {
        color: var(--tertiary-medium-grey);
        font-size: var(--body-s-nexa, var(--body-xs-arena));

        @media (width>=1024px) {
          font-size: var(--body-m-nexa, var(--heading-s-arena));
        }
      }
    }

    .car-link.active * {
      color: var(--tertiary-white);
      font-weight: 500;
    }
  }
}

@media (width >=1024px) {
  .more-from-nexa-container {
    .car-list-container {
      overflow-x: unset;
      padding-right: 56px;
      margin-right: -56px;

      .car-link:hover {
        color: var(--tertiary-white);
        font-weight: 500;
      }
    }
  }
}

@media (width >=1200px) {
  .more-from-nexa-container {
    .main__container {
      padding-top: 64px;
      padding-bottom: 72px;
      gap: 24px;

      &::after {
        content: '';
        border-bottom: 1px solid var(--tertiary-medium-dark-grey);
      }
    }
  }

  .car-list-container {
    margin-bottom: 20px;
  }
}

@media (width >=1920px) {
  .more-from-nexa-container {
    .car-list-container {
      margin-bottom: 40px;
    }
  }
}

body.arena {
  .more-from-nexa-container {
    .car-list-container {
      margin-top: 0;

      @media (width >=1200px) {
        margin-bottom: 0;
      }

      .car-link {
        .footer-text-medium {
          color: var(--tertiary-white);
          font-weight: var(--fw-300);

          @media (width >=1200px) {
            color: var(--tertiary-medium-grey);
          }
        }

        &.active * {
          color: var(--tertiary-white);
          font-weight: 500;
        }
      }
    }

    .main__container {
      background: var(--dark-blue);

      @media (width >=1200px) {
        padding-top: 56px;
        padding-bottom: 64px;
        gap: 40px;
      }

      &::after {
        border-bottom: 0.5px solid rgb(255 255 255 / 0.3);

        @media (width >=1200px) {
          border-bottom: 1px solid var(--tertiary-medium-dark-grey);
        }
      }
    }

    .title-container {
      & * {
        @media (width < 1200px) {
          margin-bottom: 16px;
        }
      }

      .car-link {
        .footer-text-medium {
          color: var(--tertiary-white);
          font-weight: var(--fw-300);
          line-height: var(--lh-18px-arena);
        }
      }
    }
  }
}