/* On larger screens, display the features items side by side */
@media (min-width: 768px) {
    .features__item {
        flex-direction: row;
        align-items: start;
    }

    .features__item--reverse {
        flex-direction: row-reverse;
    }

    .features__item__image, .features__item__content {
        flex: 1;
    }
}


/* On smaller screens */
@media (max-width: 768px) {
    /* Hide the navigation menu */
    .header__nav {
        display: none;
    }
    /* Increase height of header */
    .header {
        height: 100px;
    }
    /* Increase the height of the hero section */
    .hero {
        height: 90vh;
    }

    /* Reduce gap between features items */
    .features__item {
        gap: 10px;
    }

    /* Increase vertical padding for features content */
    .features__item__content {
        padding: 40px 20px;
    }

    /* Set fixed width instead of height for features item images */
    .features__item__image {
        overflow: visible;
    }
    .features__item__image img {
        position: relative;
        top: 0;
        width: 100%;
        height: auto;
        max-height: none;
    }

    /* Move cta up */
    .cta {
        margin-top: 0;
    }
}