diff --git a/src/components/home/MethodSteps.astro b/src/components/home/MethodSteps.astro index 2178a5d..97909e8 100644 --- a/src/components/home/MethodSteps.astro +++ b/src/components/home/MethodSteps.astro @@ -42,5 +42,14 @@ const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes( .method__circle span { position: absolute; top: -6px; left: -6px; font-family: var(--font-heading); font-size: 2.4rem; color: var(--c-heading); background: var(--c-bg-alt); padding: 0 8px; } .method__step h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; } .method__step p { font-size: .85rem; color: var(--c-text-light); } - @media (max-width: 767px) { .method__row { grid-template-columns: 1fr 1fr; } } + @media (max-width: 767px) { + /* una colonna con lo step in orizzontale: a due colonne i titoli lunghi + si spezzavano su quattro righe. */ + .method__row { grid-template-columns: 1fr; gap: 28px; text-align: left; } + .method__step { display: grid; grid-template-columns: 104px 1fr; column-gap: 18px; align-items: start; } + .method__circle { width: 104px; height: 104px; margin: 0; grid-row: 1 / span 2; } + .method__circle span { font-size: 1.8rem; top: -4px; left: -4px; } + .method__step h3 { margin-top: 4px; } + .method__note { text-align: left; margin-left: 0; max-width: none; } + } diff --git a/src/components/home/PartnersStrip.astro b/src/components/home/PartnersStrip.astro index fea7bf5..11ca9f6 100644 --- a/src/components/home/PartnersStrip.astro +++ b/src/components/home/PartnersStrip.astro @@ -16,4 +16,9 @@ const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes( .pstrip { background: var(--c-accent); padding-block: 40px; } .pstrip__in { display: flex; align-items: center; justify-content: space-around; gap: 30px; flex-wrap: wrap; } .pstrip img { height: 44px; width: auto; opacity: .9; } + @media (max-width: 767px) { + .pstrip { padding-block: 28px; } + .pstrip__in { justify-content: center; gap: 20px 28px; } + .pstrip img { height: 30px; } + } diff --git a/src/components/home/TrainingCards.astro b/src/components/home/TrainingCards.astro index 519812b..8a710e5 100644 --- a/src/components/home/TrainingCards.astro +++ b/src/components/home/TrainingCards.astro @@ -46,5 +46,11 @@ const isSwapRow = (i: number) => Math.floor(i / 2) % 2 === 1; .tcards__photo { overflow: hidden; } .tcards__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform .5s ease; } .tcards__photo:hover .tcards__img { transform: scale(1.06); } - @media (max-width: 767px) { .tcards { grid-template-columns: repeat(2, 1fr); } } + @media (max-width: 767px) { + .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .tcards__cell { padding: 22px 16px; } + .tcards__cell h3 { font-size: 1rem; letter-spacing: .08em; } + .tcards__cell p { font-size: .74rem; } + .tcards__link { font-size: .62rem; letter-spacing: .14em; margin-top: 12px; } + }