section.section {
    background: rgba(215, 236, 236, 0.5);
    border-radius: 24px;

    margin: 40px auto;
    overflow: hidden;
}

section.section>header {
    display: flex;
    flex-direction: column;
    background: #7FC9C6;
    padding: 40px; padding-left: 0 !important; padding-right: 0 !important;
    overflow: hidden;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    position: relative;
    text-align: center;
    color: white;
    min-height:200px;
}

section.section>header > .textcontent {
    position: relative;
    z-index: 20; margin: auto; }
section.section>header > picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
section.section>header > picture::after {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);

    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    z-index: 2;
}


section.section>header > picture img {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: cover;
}

section.section .textcontent p.cta {text-align: center;}
section.section .textcontent p.cta a {margin:0 0.5em;}


@media all and (min-width: 1200px) {
    section.section>header {
        min-height: 400px;
    }

}
@media all and (max-width: 899px) {
    section.section>header { padding: 36px; }
    section.section { margin:36px auto; }

}
@media all and (max-width: 599px) {
    section.section>header { padding: 24px; }
    section.section { margin:24px auto; border-radius: 14px; }

    section.section>header {
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
    }

    section.section .textcontent p.cta a {width:100%; margin:0;}
    section.section .textcontent p.cta a:not(:last-child) { margin-bottom:1em;}

}