:root {
    --max_trans_img_w: 35vw;
}


#volunteer img {
    width: 100%;
}

#volunteer {
    margin-bottom: calc(6.5 * var(--ssunit));
    gap: calc(var(--ssunit) * 3.75);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    margin-top: calc(var(--ssunit) * 6.5);
}

.vol-col-1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: calc(var(--sunit) * 2.75);
    align-items: flex-start;
}

.vol-col-2 {
    position: relative;
}

.vol-col-2::after {
    content: "";
    position: absolute;
    width: calc(var(--ssunit) * 8 * 1.185);
    height: calc(var(--ssunit) * 8);
    right: calc(var(--ssunit) * -2.5 * 1.185);
    top: calc(var(--ssunit) * -3);
    background-image: url(./imgs/corner_cap.png);
    /* background-color: red; */
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-width: 1024px) {

    .vol-col-1 {
        align-items: center;
        grid-column: span 2;
        gap:calc(var(--ssunit) * 2);
        padding:0;
    }

    .vol-col-1 img {
        display: flex !important;
    }

    .vol-col-2 {
        display: none;
    }

    #volunteer {
        gap: calc(var(--ssunit) * 3.75);
        align-items: center;
    }
    #volunteer .panel-title
    {
        text-align: center;
    }
}