section.info-featuring {
    padding-top: 6em;
}

section.info-featuring .info-container {
    background-color: var(--secondary-background-color);
    margin: 0;
}

section.info-featuring .info-container .featuring-image {
    background-size: cover;
    background-position: center;
    min-height: 25em;
}

section.info-featuring .info-container .info-text-wrapper {
    padding: 3em;
}

section.info-featuring h2 {
    margin-bottom: 20px;

    font-size: 2.625em;
    font-weight: 700;
}

section.info-featuring h3 {
    margin-bottom: 10px;
    font-size: 1.2em;
}

section.info-featuring:nth-child(2n+1) div > :nth-child(1) {
    /*
    This CSS is responsible for switching the order of text and image every second section. Additionally removes the
    unwanted padding for images.
    */
    order: 1;
    padding-left: 0;
}

section.info-featuring:nth-child(2n+1) div > :nth-child(2) {
    /*
    This CSS is responsible for switching the order of text and image every second section.
    */
    order: 2;
}

section.info-featuring:nth-child(2n) div > :nth-child(1) {
    /*
    This CSS is responsible for switching the order of text and image every second section. Additionally removes the
    unwanted padding for images.
    */
    order: 2;
    padding-right: 0;
}

section.info-featuring:nth-child(2n) div > :nth-child(2) {
    /*
    This CSS is responsible for switching the order of text and image every second section.
    */
    order: 1;
}

@media (max-width: 991px) {
    section.info-featuring {
        padding-top: 0;
    }

    section.info-featuring .info-container .info-text-wrapper {
        padding: 1.5em;
    }

    section.info-featuring:nth-child(2n+1) div > :nth-child(1) {
        /*
        The following CSS undoes the previous order swapping to allow mobile screens to show the image at the beginning.
        */
        order: initial;
        padding: 0;
    }

    section.info-featuring:nth-child(2n+1) div > :nth-child(2) {
        /*
        The following CSS undoes the previous order swapping to allow mobile screens to show the image at the beginning.
        */
        order: initial;
    }

    section.info-featuring:nth-child(2n) div > :nth-child(1) {
        /*
        The following CSS undoes the previous order swapping to allow mobile screens to show the image at the beginning.
        */
        order: initial;
        padding: 0;
    }

    section.info-featuring:nth-child(2n) div > :nth-child(2) {
        /*
        The following CSS undoes the previous order swapping to allow mobile screens to show the image at the beginning.
        */
        order: initial;
    }
}