.aw-textmedia-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 1rem;
}

.aw-textmedia-wrapper.image-above,
.aw-textmedia-wrapper.image-below {
    flex-direction: column;
}

.aw-textmedia-wrapper.image-width-100 .text {
    width: 100%;
}

.aw-textmedia-wrapper.image-width-30 .media {
    width: 30%;
}

.aw-textmedia-wrapper.image-width-30 .text {
    width: 70%;
}

.aw-textmedia-wrapper.image-width-50 .media,
.aw-textmedia-wrapper.image-width-50 .text {
    width: 50%;
}

.aw-textmedia-wrapper.image-width-70 .media {
    width: 70%;
}

.aw-textmedia-wrapper.image-width-70 .text {
    width: 30%;
}


.aw-textmedia-wrapper .media {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.aw-textmedia-wrapper.image-below .media {
    align-items: baseline;
}

.aw-textmedia-wrapper .media img {
    max-width: 100%;
    width: auto;
    height: auto;
}

.aw-textmedia-wrapper.image-left {
    flex-direction: row-reverse;
}

.aw-textmedia-wrapper.image-above {
    flex-direction: column-reverse;
}

.aw-textmedia-wrapper.image-above .text,
.aw-textmedia-wrapper.image-above .media,
.aw-textmedia-wrapper.image-below .text,
.aw-textmedia-wrapper.image-below .media {
    width: 100%;
}

.aw-textmedia-wrapper .media.col-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.aw-textmedia-wrapper .media.col-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.aw-textmedia-wrapper .media.col-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* Button Area */
.aw-textmedia-button-area {
    display: flex;
    margin-top: 3rem;
}

.aw-textmedia-button-area.left {
    justify-content: flex-start;
}

.aw-textmedia-button-area.center {
    justify-content: center;
}

.aw-textmedia-button-area.right {
    justify-content: flex-end
}

/* 64rem (1024px) */
@media (width < 64rem) {

    .aw-textmedia-wrapper {
        gap: 1.5rem;
    }

}

/* 48rem (768px) */
@media (width < 48rem) {

    .aw-textmedia-wrapper {
        flex-direction: column;
    }

    .aw-textmedia-wrapper.image-left {
        flex-direction: column-reverse;
    }

    .aw-textmedia-wrapper.image-width-30 .text,
    .aw-textmedia-wrapper.image-width-30 .media,
    .aw-textmedia-wrapper.image-width-50 .media, 
    .aw-textmedia-wrapper.image-width-50 .text,
    .aw-textmedia-wrapper.image-width-70 .media, 
    .aw-textmedia-wrapper.image-width-70 .text {
        width: 100%;
    }

    /* 40rem (640px) */
    @media (width < 40rem) {

        .aw-textmedia-wrapper .media.col-2,
        .aw-textmedia-wrapper .media.col-3,
        .aw-textmedia-wrapper .media.col-4 {
            grid-template-columns: repeat(1, 1fr);
        }

    }

}