/*
 * Layout styles for takeup.jsp template.
 * Imports only the new standalone component CSS files.
 */

@import url('/phantom/assets/css/takeup-action.css');
@import url('/phantom/assets/css/takeup-form.css');
@import url('/phantom/assets/css/takeup-other.css');

/* Variant grid layouts */

.takeup-variant-one{
    display: grid;
    grid-template-columns: 1fr;
}

.takeup-variant-two .takeup-other-content {
        flex-direction: column;
}

@media only screen and (max-width: 599px){
    .takeup-variant-two{
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media only screen and (min-width: 1200px) {
    .takeup-variant-one {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
    }
}

@media only screen and (min-width: 1200px) {
    .takeup-variant-two {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
}

/* Background override for the .template wrapper that contains takeup variants */
.template:has(.takeup-variant-one),
.template:has(.takeup-variant-two) {
    background-color: var(--primary-ultra-light);
}