/* 3 x 3 SQUARE GRID */

.square-block-container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}


.square-block {
    position: relative;
}

    .square-block::after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

    .square-block > img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center
    }

    .square-block > div {
        display: flex;
        height: 100%;
        width: 100%;
        justify-content: center;
        align-items: center;
        background: linear-gradient( 135deg, rgba(218,217,215,0.25) 0%,rgba(218,217,215,1) 100%);
    }


/* 3 x 3 SQUARE GRID */


/* 1/3 2/3 */

.block-container {
    display: flex;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.square-image, 
.square-text {
    position: relative
}

    .square-image::after,
    .square-text::after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

.rectangular-image,
.rectangular-text {
    grid-column: span 2;
    position: relative
}

    .rectangular-image::after,
    .rectangular-text::after {
        content: "";
        display: block;
        padding-bottom: 50%;
    }


    .square-image > img, 
    .rectangular-image > img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center
    }

    .square-text > div,
    .rectangular-text > div {
        position: absolute;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        justify-content: center;
        align-items: center;
        background: linear-gradient( 135deg, rgba(218,217,215,0.25) 0%,rgba(218,217,215,1) 100%);
    }

.square-text h1,
.square-text h2,
.square-text p {
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
}

/*.square-text h2:not(:first-child),
.square-text p:not(:first-child) {
    text-align: center;
    margin-top: 20px;
}*/