.theme-container {
    position: relative;
    padding-block: 2rem;
}

.theme-container section {
    margin-top: 2rem;
    margin-bottom: 38rem;
    font-size: 3rem;
    width: 90%;
}

.theme-item {
    position: relative;
    background-color: #baed91;
}

.right {
    position: relative;
    left: 10%; /* 100% - (width: 90%) */
}

.right div {
    display: inline-block;
    padding-inline: 2rem;
}

.left div {
    position: relative;
    display: inline-block;
    padding-inline: 2rem;
    left: 100%;
    transform: translateX(-100%);
}

.theme-item img {
    position: absolute;
    object-fit: contain;
    width: 64rem;
    height: 36rem;

    background-color: #C3B1E1;
}

.left img {
    top: 8rem;
    left: 2rem;
}

.right img {
    top: 8rem;
    right: 2rem;
}

@media screen and (max-width: 900px) {
    .theme-item img {
        background-color: unset;
    }
}

@media screen and (max-width: 720px) {
    .theme-item img {
        width: auto;
        max-width: 90vw;
        height: auto;
        max-height: 36rem;
    }

    .theme-item h4 {
        font-size: 2rem;
    }
}