.hp {
  overflow-x: hidden !important;
}

@media (max-width: 39.99rem) {
  .banneromaggio p {
    font-size: 1rem;
  }
}
.banneromaggio--paleblue {
  color: var(--color-darkblue);
  --bgcolor: var(--color-paleblue);
}

/* marchi */
.marchi {
  padding-inline: var(--space-l);
}
.marchi h2 {
  background: var(--color-white);
}
.marchi a.visually-hidden {
  top: -1rem;
}
.marchi p {
  padding-block: 0 3rem;
}
.marchi ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template: auto/repeat(auto-fit, minmax(8rem, 1fr));
}
@media (min-width: 108rem) {
  .marchi ul {
    grid-template-columns: repeat(10, 1fr);
  }
}
.marchi li {
  position: relative;
  z-index: 1;
  padding: 1rem;
  min-block-size: 8rem;
  background-color: var(--color-white);
  border: 1px var(--color-palegreen) solid;
  border-radius: 5px;
  background: var(--color-paleblue);
  transition: all var(--time-s) 0s;
  transform: scale(var(--scale)) perspective(1px) translateZ(0);
  cursor: pointer;
  box-shadow: 0 0 0 0 transparent;
  --scale: 1;
}
.marchi li:is(:hover, :focus-within) {
  z-index: 2;
  --scale: 1.2;
  border-color: var(--color-border-dark);
  box-shadow: var(--shadow-small);
}
.marchi li:is(:hover) {
  z-index: 3;
}
.marchi li:nth-child(4n) {
  background: var(--color-palegreen);
}
.marchi li:nth-child(11n-2) {
  background: var(--color-white);
}
.marchi li:nth-child(5n + 1) {
  background: var(--color-paleorange);
}
.marchi li:nth-child(7n + 3) {
  background: var(--color-bg-menu);
}
.marchi li:nth-child(11n + 2) {
  -background: var(--color-border);
}
.marchi li :any-link {
  color: var(--color-lightblue);
  display: block;
  position: absolute;
  z-index: 1;
  inset: 2px;
  border-radius: 3px;
  display: grid;
  place-content: center;
}
.marchi li:is([aria-hidden]) {
  display: none;
  opacity: 0;
}
.marchi li:is([aria-hidden="false"]) {
  display: block;
  animation: reveal var(--time-l) linear 0s forwards;
}
.marchi img {
  display: block;
  max-inline-size: min(100%, 6rem);
  margin: 0 auto;
}
.marchi .marchi__cta {
  margin-block: 1.5rem 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

/* pro */
.pro {
  color: var(--color-white);
}
.pro .pro__cta {
  margin-block: 3rem 1rem;
  padding: 0;
  display: flex;
  justify-content: center;
}
.pro ul {
  list-style: none;
  display: grid;
  margin-block: 1.5rem 2.5rem;
  padding: 0;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.pro li {
  display: grid;
  gap: 1rem;
  grid-row: span 3;
  grid-template-rows: subgrid;
  text-align: center;
}
.pro li::before {
  content: "";
  display: block;
  inline-size: 100%;
  block-size: 3rem;
  aspect-ratio: 1;
}
.pro li:nth-child(1)::before {
  background: url(/images/1_consegne.png) no-repeat 50% 100% / auto 80%;
}
.pro li:nth-child(2)::before {
  background: url(/images/2_ecosostenibilita.png) no-repeat 50% 100% / auto 100%;
}
.pro li:nth-child(3)::before {
  background: url(/images/3_servizi.png) no-repeat 50% 100% / auto 68%;
}
.pro li p {
  text-wrap: balance;
  font-size: 1.25rem;
  padding-inline: 1rem;
}
.pro strong {
  font-size: 2rem;
  font-weight: normal;
}

section[id$="cataloghi"]::after {
  content: "";
  display: table;
  block-size: 2.5rem;
}

.catalogs {
  background: var(--color-paleblue);
  border: 2px solid var(--color-border);
  padding: var(--space-l) calc(var(--space-l) - 2px);
  border-radius: 1rem;
  box-shadow: var(--shadow);
}
.catalogs > p {
  margin-block-end: 1rem;
}
.catalogs ul {
  list-style-type: "";
  margin: 0;
  padding: 0;
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min, 18ch), 1fr));
  gap: 1rem;
}
.catalogs span:not(:has(img)) {
  color: var(--color-lightblue);
  background: transparent;
  transition: all 0.25s 0s;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  margin-inline: auto;
  inline-size: fit-content;
}
.catalogs :any-link {
  display: block;
  color: var(--color-lightblue);
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.1rem;
  padding: 1rem 0.5rem 0.5rem;
  border-radius: 0.5rem;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.catalogs :any-link > small {
  opacity: 0;
  transition: opacity 0.25s 0s;
}
.catalogs :any-link:is(:hover, :focus) span:not(:has(img)) {
  color: var(--color-white);
  background: var(--color-lightblue);
}
.catalogs :any-link:is(:hover, :focus) > small {
  opacity: 1;
}
.catalogs small {
  display: block;
  font-weight: 400;
  margin-block-start: auto;
}
.catalogs picture {
  display: block;
  margin-block-end: 1rem;
  filter: drop-shadow(2px 2px 6px var(--color-darkblue));
}
.catalogs li {
  text-align: center;
  --masksize: 100%;
  --rotate: 0deg;
  padding-inline: 1.5rem;
}
.catalogs li:is(:focus-within, :hover) {
  --masksize: 450%;
  --rotate: -4deg;
}
@container main (width < 60rem) {
  .catalogs li {
    min-inline-size: min(15rem, 50%);
  }
}
@container main (width < 30rem) {
  .catalogs li {
    min-inline-size: 100%;
  }
}
.catalogs img {
  max-inline-size: 8rem;
  margin-inline: auto;
  display: block;
  mask: url(/images/bg/catalogs.svg) center/contain no-repeat;
  mask-size: var(--masksize);
  mask-position: 50% 70%;
  will-change: mask-size;
  transform: rotate(var(--rotate));
  transition:
    mask-size 0.33s ease-out 0s,
    transform 0.33s 0s;
  filter: drop-shadow(2px 2px 6px var(--color-darkblue));
}

main {
  container: main/inline-size;
}

@container main (width < 58rem) {
  section:has(.launch--registrazione) {
    margin-block-start: -4rem;
  }
}
#newsletter {
  padding-inline: var(--space-l);
}