_try-matrix.scss

.try_matrix {
    display: flex;
    flex-direction: column;

    .step-background {
        padding: 5rem 5.625rem;

        @media (max-width: 767px) {
            padding: 1rem;
        }

        &.coloured {
            background-color: #fafafa;
        }
    }

    .step {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;

        @media (max-width: 767px) {
            grid-template-columns: 1fr;
        }

        margin-block: auto;

        .instructions {
            display: flex;
            flex-direction: column;

            padding-block: 1rem;

            h3 {
                font-size: 2.2rem;
                margin-top: 0;
            }

            p {
                font-size: 1.3rem;
            }
        }

        img {
            max-height: 220px;
            max-width: 360px;

            margin: auto;

            @media (max-width: 767px) {
                margin-block: 2rem;
                max-width: calc(100% - 2rem);
            }
        }
    }

    .cta-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }
}