@import '../main.css'; /* MANDATORY */
@import '../elements/button.css';
@import '../elements/card.css';

main { 
    position: relative;
    text-align: center;
    width: 100%;
    height: calc(100vh - 135px);
    overflow-y: scroll;
}

main > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50vh;
    background-image: linear-gradient(to bottom, var(--str8lines-primary), var(--str8lines-primary-transparent) 35%, var(--str8lines-primary-white)), url(../../../images/str8lines_header_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

main > section > img { 
    max-width: 860px;
    width: 100%;
    padding: 25px 0;
}

main > section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

main > section > h1 { padding: 25px 0 10px 0; }
main > section > p { 
    line-height: 30px;
    font-size: 18px;
    padding-bottom: 15px;
}
body.dark main > div { background-image: linear-gradient(to bottom, var(--str8lines-primary-transparent), var(--str8lines-primary-gradient) 0%, var(--str8lines-primary-dark)), url(../../../images/str8lines_header_bg.png); }

@media (max-width: 260px) {
    main { height: calc(100vh - 252px); }
    main > div { height: 25vh; }
    main > section > h1 { font-size: 26px; }
}

@media (max-width: 480px) {
    main > div { 
        display: flex;
        align-items: center;
    }
    main > section > img { padding: 30px 0 0 0; }
    main > section > p { 
        font-size: 14px; 
        line-height: 24px;
    }
}

@media (min-width: 260px) and  (max-width: 480px) {
    main { height: calc(100vh - 209px); }
    main > div { height: 35vh; }
    main > section { margin: 0 auto; }
    main > section > h1 { font-size: 34px; }
}

@media (min-width: 481px) and (max-width: 768px) {
    main { height: calc(100vh - 150px); }
    main > section > img { max-width: 481px; }
    main > section > p { 
        font-size: 16px; 
        line-height: 28px;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    main { height: calc(100vh - 143px); }
    main > section > img { max-width: 768px; }
}