.compare {
  background-color: #F5F5F5;
  border-radius: 16px;
  padding: 0 80px 80px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #E0E0E0 transparent;
  container: compare / inline-size;

  .compare__item {
    width: max-content;
    padding-top: 160px;
  }

  .compare__title {
    display: block;
    text-align: center;
    font-style: normal !important;
    font-size: 28px;
    text-transform: none;

    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .compare__images,
  .compare__values,
  .compare__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 176px;
    place-items: center;
    gap: 1rem;
  }

  .compare__product-name,
  .compare__button {
    font-family: 'Nexa', sans-serif !important;
  }

  .compare__images {
    align-items: baseline;

    .compare__image {
      display: grid;
      place-items: center;
      row-gap: 8px;
      width: 100%;
      height: 100%;
    }
  }

  .compare__product-name {
    color: #424242;
    font-weight: 700;
    text-wrap-style: pretty;
    text-align: center;
    padding-inline: .5rem;
  }

  .compare__details {
    padding-block: 40px;

    .compare__row {
      display: grid;
      grid-auto-flow: column;
      row-gap: 8px;
      margin-block: 1rem;

      .compare__label {
        grid-row: 1;
      }

      .compare__values {
        grid-row: 2;
      }
    }

    .compare__label {
      position: absolute;
      left: 80px;
      right: 80px;
      border-top: 1px solid #C7C7C7;

      &:before {
        content: attr(data-label);
        position: absolute;
        padding-inline: 8px;
        margin-left: 32px;
        background-color: #F5F5F5;
        color: #8B8A8A;
        font-size: 12px;
        text-transform: uppercase;
        transform: translateY(-10px);
      }
    }

    .compare__values {
      padding-block: 16px;
      text-align: center;

      .compare__value {
        font-size: 14px;
        font-weight: 500;
      }
    }
  }

  .compare__actions,
  .compare__link,
  .compare__button {
    line-height: 1;
  }

  .compare__actions {
    .compare__link {
      padding: 10px;
      border: 1px solid #8B8A8A;
      border-radius: 8px;
      width: 100%;
      text-align: center;

      .compare__button {
        color: #8B8A8A;
        font-size: 18px;
        font-weight: 500;
        text-transform: uppercase;
      }
    }
  }

  @media screen and (max-width: 480px) {
    background-color: white;
    margin-inline: -16px;
    padding: 16px 16px 24px;

    .compare__title {
      font-size: 24px;
      width: 100%;
    }

    .compare__images,
    .compare__values,
    .compare__actions {
      grid-auto-columns: 140px;
    }

    .compare__details {
      padding-block: 24px;

      .compare__label {
        left: 16px;
        right: 16px;

        &:before {
          background-color: white;
        }
      }
    }

    .compare__actions {
      .compare__link {
        border-radius: 4px;
        padding: 3px 8px;

        .compare__button {
          font-size: 12px;
        }
      }
    }
  }
}