@font-face {
    font-family: 'Dancing Script';
    src: url('../fonts/DancingScript-Bold.woff2') format('woff2'), url('../fonts/DancingScript-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

.outer-container {
    max-width: 600px;
    margin: auto;
    width: 90%;
    padding: 200px 0px;
    position: relative;
}

.image-container {
    padding-bottom: 100%;
    background: black;
    position: relative;
    overflow: hidden;
    z-index: 2;
    background-size: cover;
    background-position: center;
}

.section-title {
    font-family: 'helveticabold';
    margin: 0;
    font-size: 80px;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 55%;
    /* left: -40%; */
    transform: translateY(-90%);
    z-index: 1;
    white-space: nowrap;
}

.section-title.on-dark {
    color: white;
}

.section-title h2 {
    font-size: 45px;
    font-family: 'Dancing Script';
}

.section-title span {
    position: relative;
    display: block;
}


/* end text CSS___________ */