h1 {
    font-size: 2.2em !important;
    font-style: italic
}

h2 {
    font-size: 2.2em;
    font-style: italic
}

#manifest p {
    font-size: 1.2em;
    font-weight: var(--fw-bold)
}

.sec-1 .left,.sec-1 img,.sec-1 .right {
    position: relative
}

.sec-1 .left {
    line-height: 0
}

.sec-1 .bg {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 120%;
    background: var(--c-green-soft)
}

.sec-1 p,.sec-2 p {
    margin-top: 1.2em
}

.sec-2 {
    margin-top: 1.6rem;
    background: var(--c-cream);
    position: relative
}

.sec-2 img {
    width: 30%
}

.sec-3 {
    --ar: 16 / 9
}

.sec-3 .left>* {
    border-radius: .8rem;
    overflow: hidden
}

.sec-3 p {
    margin-top: .4rem
}

@media (max-width: 992px) {
    .sec-2 img {
        width:40%
    }
}

@media (min-width: 768px) {
    .sec-1 .right {
        padding-top:2.6rem
    }

    .sec-1 .title,.sec-3 .title {
        white-space: pre-wrap
    }

    .sec-2 img {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%)
    }
}

@media (max-width: 768px) {
    .sec-1 .bg {
        height:100%;
        width: 100%
    }

    .sec-2 .right {
        display: flex;
        justify-content: flex-end;
        margin-right: calc((var(--swpad) + 6px) * -1)
    }

    .sec-2 img {
        width: 50%
    }
}

@media (max-width: 576px) {
    .sec-2 img {
        width:80%
    }
}

.sec-inits h2 {
    font-size: 1.2em;
    font-family: var(--base-ff);
    color: var(--c-prim);
    font-style: normal;
    font-weight: 700
}

.inits-cont {
    --ar: 300 / 142
}

.inits-cont h3 {
    color: var(--base-c);
    font-family: var(--base-ff);
    font-size: 1em;
    text-align: center
}

.inits-cont>* {
    display: flex;
    flex-direction: column;
    position: relative
}

.inits-cont>*:hover .image {
    box-shadow: var(--btn-shadow)
}

.inits-cont .name {
    margin-top: auto;
    text-align: center
}

.inits-cont h3 {
    margin-top: 1em
}

.inits-cont .image {
    border: 2px solid var(--soft-green);
    border-radius: .8em;
    padding: .8em 1.6em
}

.popup {
    position: absolute;
    bottom: 80%;
    left: 80%;
    width: 90%;
    flex-direction: column;
    text-align: center;
    padding: 1em;
    box-shadow: .4rem .3rem .6rem rgba(0,0,0,0.7);
    z-index: 2;
    background: var(--soft-green);
    font-size: .8em;
    font-weight: var(--fw-med);
    border-radius: 1em;
    display: none;
    visibility: hidden
}

.inits-cont>*:hover .popup,.popup.show {
    display: initial;
    visibility: visible
}

.popup img {
    width: 30%
}

.inits-cont>:last-child .popup {
    left: auto;
    right: 80%
}

@media (max-width: 992px) {
    .popup {
        width:120%
    }

    .inits-cont>:nth-child(even) .popup {
        left: auto;
        right: 80%
    }
}