@font-face {
  font-family: 'WorkSans';
  src: url('../fonts/WorkSans-Regular.ttf') format('truetype');
  font-style: normal;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'WorkSans';
}

/* OFFER STRIP */
.offer-strip{
    width:100%;
    background:#b8efab;
    padding:1rem 0;
    text-align:center;
    font-size:1.2rem;
    font-weight:bold;
}

/* LOGO SECTION */
.brand{
    width:100%;
    padding:1vh 0;
    display:flex;
    justify-content:center;
    align-items:center;
}
.brand img{
    width:23vw;
    max-width:250px;
}

/* MAIN SECTION */
.layout{
    height:90vh;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
}

/* TEXT SECTION */
.content{
    width:50%;
    background:#39693b;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.content h1{
    width:85%;
    font-size:2.4rem;
    line-height:1.2;
    margin-bottom:1rem;
    color:#f4f1df;
    text-align:left;
}

.highlight{
    color:#d8a929;
}

.rating,
.points,
.action{
    width:85%;
}

.content p{
    font-size:1.2rem;
    margin:0.5rem 0;
    color:#f4f1df;
}

/* BUTTON */
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#f4eddc;
    color:#1a1a1a;
    padding:1rem 1.5rem;
    border-radius:3rem;
    font-size:1.7rem;
    font-weight:600;
    margin-top:2rem;
    cursor:pointer;
    text-decoration:none;
    gap:0.6rem;
    transition:0.3s ease;
}
.button:hover{
    background:#efe4c9;
}
.button span{
    font-size:1.3rem;
}

/* IMAGE SECTION */
.visual{
    width:50%;
    height:100%;
}
.visual img{
    width:100%;
    height:100%;
}

/* MOBILE */
@media(max-width:768px){
    .brand img{
        width:70vw;
    }

    .layout{
        flex-direction:column;
        height:125vh;
    }

    .content{
        width:100%;
        height:75vh;
        padding:20px;
    }

    .visual{
        width:100%;
        height:50vh;
    }

    .content h1{
        font-size:1.7rem;
        width:100%;
    }

    .rating{
        width:100%;
        text-align:left;
    }

    .points{
        width:100%;
        align-items:flex-start;
    }

    .content p{
        font-size:1rem;
    }
}

@media (min-width:376px) and (max-width:768px){
    .layout{
        height:104vh;
    }

    .content{
        height:54vh;
    }
}

/* FOOTER */
footer{
    background:#000;
    padding:15px 10px;
    text-align:center;
}
footer a,
footer a:hover{
    color:#fff;
    font-size:20px;
    text-decoration:none;
}