.theme {
    background: url("../../ressources/img/FinelinerWaveBig.c7405d3b47a9.svg") no-repeat left bottom, var(--color2);
    background-size: auto 50%;
}

.subtheme-container {
    margin-left: -1em;
    margin-right: -1em;
    margin-top: -2em;
    column-gap: 1em;
    column-width: 16em;
    padding-top: 2em;
}

.subtheme {
     -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    column-break-inside: avoid;
    display: inline-block;
    margin: 0.7em 0;
    font-size: 0.75em;
}

.theme-title .logo {
    margin-top: -6em;
}

.theme-logo-margin-top {
    margin-top: 4em;
}


/*
Responsive
----------------------------------------------------------------------------*/
@media only screen and (min-width: 900px) {

    .theme {
        width: 36em;
    }
    .subtheme-container {
        margin-left: 0;
        margin-right: 0;
    }
}

@media only screen and (min-width: 1200px) {

    .theme-title .logo {
        margin: 0;
        margin-right: 2em;
    }
    .theme-logo-margin-top {
        margin-top: 0;
    }
    .theme-title {
        display: flex;
    }
    .theme {
        width: 86%;
        padding: 0;
        background: inherit;
        box-shadow: inherit;
        display: flex;
        flex-direction: row-reverse;
    }
    .theme-container {
        flex: 1;
        padding-top: 3em;
        z-index: 0;
    }
    .theme-title {
        margin-left: -14em;
    }
    .subtheme-container {
        padding: 2em;
        box-shadow: var(--shadow);
        margin-bottom: 3em;
        margin-right: 3em;
        flex: 1;
        margin-top: 0;
        padding-top: 12em;
        background: url("../../ressources/img/FinelinerWaveBig.c7405d3b47a9.svg") no-repeat left bottom, var(--color2);
        background-size: 40em;
    }
}