.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;
        }

    }
}