.app-offset-columns{> h2 { margin-bottom: 45px; text-align: center; @media (width < 768px) { margin: 15px 15px 30px; } } > p { max-width: var(--max-text-width); margin: -30px auto 45px; text-align: center; } > div { display: flex; flex-wrap: wrap; @media (width >= 768px) { gap: 15px; } @media (width >= 1024px) { gap: 30px; } @media (width >= 1280px) { gap: 45px; } @media (width >= 1536px) { gap: 60px; } > div { img { display: block; width: 100%; object-fit: cover; } h3 { margin-block: 15px; @media (width >= 768px) { margin-top: 22px; } @media (width >= 1280px) { margin-top: 37px; } @media (width >= 1536px) { margin-top: 52px; } } } &.app-reduced { padding: 0 5%; } } > .app-button, > .app-link { display: block; width: fit-content; margin: 90px auto 0; } &.app-offset-2-columns { padding-bottom: 90px; > div { > div { width: calc(50% - 7.5px); @media (width >= 1024px) { width: calc(50% - 15px); } @media (width >= 1280px) { width: calc(50% - 22.5px); } @media (width >= 1536px) { width: calc(50% - 30px); } &:nth-child(even) { transform: translateY(60px); } img { aspect-ratio: 4 / 3; } } } } &.app-offset-3-columns { padding-bottom: 105px; > div { > div { width: calc(33.3333% - 10px); @media (width >= 1024px) { width: calc(33.3333% - 20px); } @media (width >= 1280px) { width: calc(33.3333% - 30px); } @media (width >= 1536px) { width: calc(33.3333% - 40px); } &:nth-child(3n+2) { transform: translateY(30px); } &:nth-child(3n+3) { transform: translateY(60px); } img { aspect-ratio: 4 / 5; @media (width >= 1024px) { aspect-ratio: 1 / 1; } } } } } @media (width < 768px) { img { aspect-ratio: auto !important; } &.app-2-items { padding-bottom: 30px; > div > div { width: 100%; padding-top: 0; &:nth-child(2) { padding-top: 45px; transform: translateY(0); } } &.app-first-mobile-image-full-width { > div > div:nth-child(1) img { margin: 0 -20px; width: calc(100% + 40px); } } &.app-second-mobile-image-larger-margin { > div > div:nth-child(2) { padding-inline: 15px; } } } &.app-many-items { padding-bottom: 0; > div { display: block; margin: 0 -10px; width: calc(100% + 20px); > div { position: absolute; width: calc(50% - 5px); transform: translateY(0) !important; h3, p { margin-inline: 10px; } a { margin-left: 10px; } } } } > .app-button, > .app-link { margin: 30px auto 60px; } }}