/* Basic styles for .intro-content */
.intro-content {
}

/* Styles for each item within .intro-content */
.intro-content--item {
}

/* Styles for the inner content of each item */
.intro-content--item .item--inner {
    display: block;
    margin: 0 auto;
    padding: 0.5rem 0 2rem;
}

/* Styling for the media part of the item */
.intro-content--item .intro-content--media {
    margin: 0 0 4rem 0;
}

/* Responsive image handling within the media */
.intro-content--item .intro-content--media img {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* Styling for the text part of the item */
.intro-content--item .intro-content--text {
    margin: 0 0 4rem 0;
}

/* Media query for screens at least 1200px wide */
@media screen and (min-width: 1200px) {
    /* Use flexbox for .item--inner */
    .intro-content--item .item--inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    /* Flexbox settings for media within .item--inner */
    .intro-content--item .intro-content--media {
        flex: 1; /* Flexible grow factor */
        order: 1; /* Order of appearance */
        max-width: 100%; /* Maximum width constraint */
    }

    /* Flexbox settings for text within .item--inner */
    .intro-content--item .intro-content--text {
        flex: 1 1 80%; /* Flexibility and basis for growing */
        order: 2; /* Order of appearance */
    }

    /* Additional styles for paragraphs in the text part */
    .iif .intro-content .intro-content--item .intro-content--text p {
        font-size: inherit;
        padding-right: 3rem;
    }

    /* Special alignment adjustments when class 'item__right-align' is added */
    .intro-content--item.item__right-align .intro-content--media {
        order: 2; /* Media comes second */
    }

    .intro-content--item.item__right-align .intro-content--text {
        order: 1; /* Text comes first */
    }

    /* Specific flex-basis settings for different layouts designated by data-size attributes */
    .intro-content--item[data-size='50-50'] .intro-content--media,
    .intro-content--item[data-size='50-50'] .intro-content--text {
        flex-basis: 50%; /* Even split */
    }

    .intro-content--item[data-size='60-40'] .intro-content--media {
        flex-basis: 40%; /* Smaller portion for media */
    }

    .intro-content--item[data-size='60-40'] .intro-content--text {
        flex-basis: 60%; /* Larger portion for text */
    }

    .intro-content--item[data-size='70-30'] .intro-content--media {
        flex-basis: 30%; /* Smaller portion for media */
    }

    .intro-content--item[data-size='70-30'] .intro-content--text {
        flex-basis: 70%; /* Larger portion for text */
    }
}