.content {
    grid-column: 1/4;
}

.pluginsflavortext {
    width: 100%;
    height: 66px;
    padding-top:10px;
    text-align: right;
    background-color: #B2B2B2;
    font-size: 48px;
    line-height: 58px;
    font-weight: 700;
    font-family: 'L5';
    color: #000000;
}

.pluginsflavortext p {
    margin-right: calc(50% - var(--currentbp_center_half) + 10px);
}

.pluginproduct {
    width: 100%;
    display: grid;
    margin: 20px 0px;
    grid-template-columns: 1fr var(--currentbp_center) 1fr;
    grid-template-rows: 263px;
    overflow: hidden;
}

.brand {
    display: grid;
    grid-column: 2/ 3;
    grid-row:1/2;
    overflow: hidden;
}

.billboard {
    display: grid;
    grid-column: 2/3;
    grid-row:1/2;
    grid-template-columns: auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: 
    "producttitle"
    "subtitle"
    "tagline";
    row-gap: 0px;
    margin-left: 10px;
    margin-right: 10px;
    align-content: flex-start;
}

.producttitle {
    grid-area: producttitle;
    background-repeat: no-repeat;
    margin-top:18px;
    height: 65px;
}

.subtitle {
    grid-area: subtitle;
    background-repeat: no-repeat;
    margin-top:8px;
    height: 38px;
}

.tagline {
    grid-area: tagline;
    background-repeat: no-repeat;
    align-self: end;
    height: 26px;
    margin-bottom: 20px;
}

.taglinesplit {
    grid-area: tagline;
    align-self: end;
    margin-bottom: 20px;
    width: auto;
    display: none;
}




/* product specific */
#mishby .fillbar {
    background-color: var(--fsi_red);
}

#mishby .brand {
    align-self: center;
    margin-right: 10px;
}
#mishby .producttitle {
    height: 90px;
    background-image: url("/images/products/mishby/title.svg");
}
#mishby .subtitle {
    background-image: url("/images/products/mishby/subtitle.svg");
}
#mishby .tagline {
    background-image: url("/images/products/mishby/tagline.svg");
}

#backmask .producttitle {
    background-image: url("/images/products/backmask/title.svg");
}
#backmask .subtitle {
    background-image: url("/images/products/backmask/subtitle.svg");
}
#backmask .tagline {
    background-image: url("/images/products/backmask/tagline.svg");
    height: 29px;
}
#backmask .fillbar {
    background-color: #FFB53F;
}
#backmask .brand img {
    width: 321px;
    margin-top: 10px;
    margin-right: 10px;
}

#dumpsterfire .producttitle {
    background-image: url("/images/products/dumpsterfire/title.svg");
    background-position: right;
}
#dumpsterfire .subtitle {
    background-image: url("/images/products/dumpsterfire/subtitle.svg");
    background-position: right;
}
#dumpsterfire .tagline {
    background-image: url("/images/products/dumpsterfire/tagline.svg");
    background-position: right;
    text-align: right;
}
#dumpsterfire .fillbar {
    background-color: #F96E48;
}
#dumpsterfire .billboard {
    grid-template-columns: 650px;
    text-align: right;
}
#dumpsterfire .brand img {
    width: 421px;
    margin-top: -85px;
}


@media screen and (max-width: 1000px)
{
    .pluginsflavortext {
        height: 53px;
        padding-top: 0px;
        font-size: 34px;
        line-height: 53px;
    }
    .pluginproduct {
        grid-template-rows: 200px;
    }

    .producttitle {
        height: 50px;
    }
    
    .subtitle {
        height: 26px;
    }
    
    .tagline {
        height: 19px;
    }
    

    #backmask .brand img {
        width: 238px;
    }
    #backmask .tagline {
        height: 22px;
    }

    #dumpsterfire .billboard {
        grid-template-columns: 450px;
    }
    #dumpsterfire .brand img {
        width: 307px;
        margin-top: -60px;
    }
    
    #mishby .brand img {
        width: 290px;
    }
    #mishby .producttitle {
        height: 72px;
    }


}

@media screen and (max-width: 768px)
{
    .pluginsflavortext {
        height: 49px;
        margin-top: 20px;
        font-size: 26px;
        line-height: 49px;
    }
    .pluginsflavortext p {
        margin-right: calc(50% - var(--currentbp_center_half));
    }
    .pluginproduct {
        grid-template-rows: 258px;
    }

    .billboard {
        margin-left: 0px;
        margin-right: 0px;
    }

    .subtitle {
        height: 20px;
    }
    #backmask .tagline {
        display: none;
    }
    #dumpsterfire .tagline {
        display: none;
    }
    .tagline {
        height: 17px;
    }
    .taglinesplit {
        display: block;
        height: 45px;
        width: auto;
        background-repeat: no-repeat;
        
    }
    .brand {
        margin-top: 75px;
    }
    #mishby .brand {
        margin-right: -10px;
    }
    #mishby .brand img {
        width: 276px;
        margin-right: 0px;
    }
    #backmask .brand {
        margin-right: -20px;
    }
    #backmask .brand img {
        width: 295px;
    }
    #dumpsterfire .brand {
        overflow: visible;
    }
    #dumpsterfire .brand img {
        width: 257px; 
        margin-top:-30px;
    }
    #backmask .taglinesplit {
        background-image: url("/images/products/backmask/tagline_split.svg");

    }
    
    #dumpsterfire .taglinesplit {
        background-image: url("/images/products/dumpsterfire/tagline_split.svg");
        background-position: right;
    }
}

@media screen and (max-width: 480px)
{
    .pluginsflavortext {
        height: 42px;
        margin-top: 0px;
        font-size: 17px;
        line-height: 42px;
    }
    .pluginsflavortext p {
        
        margin-right: calc(50% - var(--currentbp_center_half) + 10px);
    }
    .pluginproduct {
        grid-template-rows: 204px;
        margin-top:22px;
    }
    .brand {
        overflow: visible;
    }
    .producttitle {
        margin-top:21px;
        background-position: center;
    }
    .subtitle {
        height: 15px;
        margin-top: 10px;
    }
    .tagline {
        display: none;
    }
    .taglinesplit {
        display: none;
    }

    #mishby .brand img {
        margin-top:20px;
        width: 178px;
    }
    #mishby .producttitle {
        height: 63px;
    }
    #backmask .brand img {
        width: 178px;
    }
    #backmask .producttitle {
        height: 34.5px;
    }
    #mishby .billboard {
        grid-template-columns: var(--currentbp_center);
    }
    #backmask .billboard {
        grid-template-columns: var(--currentbp_center);
    }
    #backmask .subtitle {
        background-position: right;
    }
    #dumpsterfire .billboard {
        grid-template-columns: var(--currentbp_center);
    }

    #dumpsterfire .brand img {
        margin-top: -30px;
        width: 198px;
        
    
    }

    #dumpsterfire .producttitle {
        height: 32px;
    }

    
}