/* CSS for each work project */

/* Brand information section */
.brand-section {
    margin-top: 80px;
}

.work-header {
    font-family: 'JosefinSansRegular';
    font-size: 8vw;
    margin: 0;
    background: -webkit-linear-gradient(#9CE5FB, #FCD3E6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.work-main-section {
    background-color :white;
    min-height: 400px;
}

.background-banner-content {
    display: block;
    width: 100%;
    height: auto;
}

/* Mobile devices */
@media only screen and (min-width: 320px) and (max-width: 479px) { 
    .brand-section {
        margin-top: 8vh;
    }

    .work-header {
        font-family: 'JosefinSansRegular';
        font-size: 5em;
    }

    .work-main-section {
        min-height: auto;
    }
}

/* Mobile-landscape (and larger) */
@media only screen and (min-width: 480px) and (max-width: 767px){
    .work-header {
        font-family: 'JosefinSansRegular';
        font-size: 100px;
    }
}

/* Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) and (max-width: 991px){
    .work-header {
        font-family: 'JosefinSansRegular';
        font-size: 100px;
    }
}

/* Tablet-landscape (and larger) */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
}

/* For desktop devices */
@media only screen and (min-width: 1500px) {
    .sq-layout {
        padding: 5vw 12vw;
    }

    .work-header {
        font-size: 140px;
    }
}