@import url('/styles/subscribe.css');

.subscribe-available-models-wrapper {
  background-color: var(--nav-background-color);

  .subscribe-available-models {
    padding-top: 0;
    padding-bottom: 20px;
    .model-card {
      text-align: center;

      .model__image {
        background: #f8f8f8;
        border-radius: 70px;
        padding: 10px;
        text-align: center;

        img {
          width: 80%;
        }
      }

      .model__brand-logo {
        max-width: 140px;
      }
    }

    .available-models-slider {
      position: relative;

      .splide__arrows {
        position: absolute;
        top: calc(50% - 80px);
        transform: translateY(-50%);
        display: inline-block;
        width: 100%;
        justify-content: space-between;

        button {
          padding: 0;
          border: none;
          background-color: transparent;
          outline: none;

          &:disabled {
            display: none;
          }
        }

        .splide__arrow--prev, .splide__arrow--next {
          position: absolute;
        }

        .splide__arrow--prev {
          left: -30px;
        }

        .splide__arrow--next {
          right: -30px;
        }
      }
    }

    .subscribe-available-models__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-15px);

      .available-models__title {
        font-size: var(--subscription-font-3-desc);

        @media (width >= 992px) {
          font-size: var(--subscription-lh-10-desc-display);
        }
      }
    }

    .model__brand-logo {
      margin: 10px 0;
    }

    .model-card__fee {
      font-size: 14px;
      margin: 0;
      margin-bottom: 10px;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }

    .model-card__subscribe-btn-wrapper {
      text-align: center;

      .model-card__subscribe-btn {
        display: inline-block;
      }
    }
  }
}