ratings {
  display: flex;
  justify-content: center;
  width: 100vw;
  background: var(--petrol-blue-500);

  > content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 28.125rem;
    margin: 0;
    padding: 2.5rem 1.5rem;
    @media (min-width: 993px) {
      gap: 1.875rem;
      max-width: 56.25rem;
    }
    @media (min-width: 1441px) {
      flex-direction: row-reverse;
      align-items: flex-start;
      max-width: 75rem;
    }

    > info {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      color: var(--white-500);
      @media (min-width: 993px) {
        gap: 0.75rem;
        width: 25rem;
      }
      @media (min-width: 1441px) {
        align-items: flex-start;
        width: auto;
      }

      > h2 {
        text-align: center;
        margin: 0;
        @media (min-width: 1441px) {
          text-align: left;
        }
      }

      > p {
        text-align: center;
        margin: 0;
        @media (min-width: 993px) {
          margin-top: 0.25rem;
        }
        @media (min-width: 1441px) {
          text-align: left;
        }
      }

      > rating {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        @media (min-width: 993px) {
          margin-bottom: 0;
        }

        > p {
          margin: 0;
        }

        > svg {
          flex-shrink: 0;
          width: 5.18rem;
          height: 1.3rem;
        }
      }
    }

    > ul {
      display: flex;
      gap: 1.25rem;
      list-style-type: none;
      width: clamp(18.75rem, calc(100vw - 1.25rem), 28.125rem);
      margin: 0;
      padding: 0;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
      @media (min-width: 993px) {
        flex-wrap: wrap;
        justify-content: center;
        width: 38.875rem;
      }
      @media (min-width: 1441px) {
        flex-shrink: 0;
        width: 38.75rem;
      }

      > li {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        min-width: 100%;
        padding: 1rem;
        border-radius: 0.625rem;
        background: var(--gray-50);
        scroll-snap-align: start;
        scroll-snap-stop: always;
        @media (min-width: 993px) {
          width: 18.75rem;
          min-width: auto;
        }

        p {
          margin: 0;
        }

        > review-data {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;

          > info {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;

            > svg {
              flex-shrink: 0;
              width: 3.8rem;
              height: 0.75rem;
            }
          }

          > p {
            color: var(--black-300);
          }
        }
      }
    }

    > radio-buttons {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      @media (min-width: 993px) {
        display: none;
      }

      > button {
        width: 1.5rem;
        height: 1.5rem;
        border: none;
        border-radius: 50%;
        background: var(--gray-300);
      }
    }
  }
}