section.showroom_and_point_of_sale_list {
  max-width: var(--max-section-grid-width);
  margin: 0 auto;
  padding-inline: var(--spacing-side);
  padding-block: var(--spacing-xxl);

  @media screen and (max-width: 48rem) {
    padding-inline: var(--spacing-side-mobile);
  }

  .content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
  }

}

.showroom-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--spacing-md);

  .showroom-card-wrapper {
    display: grid;
    grid-template-rows: 1fr 1.75fr;
    border-radius: 0.25rem;
    overflow: hidden;
    background-color: #f2f1f1;

    .top-content {
      max-height: 11rem;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }

    .showroom-category {
      position: absolute;
      top: 12px;
      left: 12px;

      img {
        backdrop-filter: blur(2px);
      }
    }

    .bottom-content {
      padding: var(--spacing-md);
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
      justify-content: space-between;

      .title-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);

        .section-title {
          letter-spacing: normal;
        }

        .address-wrapper {
          span {
            display: inline;
            line-height: normal;
          }
        }
      }

      .divider {
        width: 100%;
        height: 1px;
        background-color: #e4e7ea;
      }

      .details-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);

        .phone-wrapper {
          display: flex;
          gap: var(--spacing-xs);

          a {
            color: #67766c;
            line-height: normal;
            letter-spacing: -0.0075rem;
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: none;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
            text-underline-position: from-font;
          }
        }

        .email-wrapper {
          display: flex;
          gap: var(--spacing-xs);

          a {
            color: #67766c;
            line-height: normal;
            letter-spacing: -0.0075rem;
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: none;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
            text-underline-position: from-font;
          }
        }
      }

      .cta-card {
        cursor: pointer;
        display: flex;
        height: 2rem;
        padding: var(--spacing-sm);
        align-items: center;
        justify-content: space-between;
        gap: 0.25rem;
        align-self: stretch;
        border-radius: 0.125rem;
        border: 1px solid #e4e7ea;
        background: #fff;
        transition: all 0.2s ease-in-out;
      }
    }
  }
}

.point-of-sales-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxl);

  .continent-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);

    .continent {
      letter-spacing: normal;
    }

    .countries {
      display: grid;
      /* voglio definire questa lista in modo che riempia la prima colonna (max 15rem), dopodiche' riempie la seconda colonna(max 15rem di altezza) e cosi via */
      grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
      grid-auto-rows: 1fr;
      row-gap: var(--spacing-xxs);

      @media screen and (max-width: 48rem) {
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
      }

      .country {
        a {
          position: relative;
          overflow: hidden;
          text-decoration: none;
          padding-bottom: 3px;
          display: inline-block;
          /* Per effetto underline */

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: var(--black);
            transform: translateX(-105%);

            transition: transform 0.3s ease;
          }

          &:hover,
          &:focus {
            outline: none;

            &::after {
              transform: translateX(0);
            }
          }
        }
      }
    }
  }
}