/* <!-- 				                      
  _ _ _ _ _ _ _ _ _ _ _

   ┬ ┬┌─┐┌─┐ \│/\│/\│/  
   ││││ ││ │ ─ ── ── ─  
   └┴┘└─┘└─┘ /│\/│\/│\ 
    ┬┌─┐┌─┐┌┐┌┌┐┌┌─┐\│/
    ││ │├─┤││││││├─┤─ ─
   └┘└─┘┴ ┴┘└┘┘└┘┴ ┴/│\
   ┌┬┐┌─┐┌─┐┬┌─┐┌┐┌┌─┐ 
    ││├┤ └─┐││ ┬│││└─┐ 
   ─┴┘└─┘└─┘┴└─┘┘└┘└─┘ 
  _ _ _ _ _ _ _ _ _ _ _

	 --> */

* {
    margin: 0;
    padding: 0;
    border: 0;
    border-style: none;
    border-color: initial;
    border-width: 0;
    list-style: none;
    text-decoration: none;
    background-color: transparent;

}

body{
    text-align: center;
}

.billboard {
    height: 581px;
    width: 100%;
    background-color: red;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

.btn-primary {
    background-color: #e84624;
    font-family: 'peachy-keen-jf';
    padding: 16px 56px;
    text-transform: uppercase;
    color: white;
    position: relative;
    margin: 24px;
}

.btn-primary-border::before {
    width: 100%;
    height: 100%;
    display: block;
    content: ' ';
    position: absolute;
    border: 1px solid #EF9B96;
    left: -4px;
    top: -4px;
}

img {
    width: 100%;
}

.full {
    margin: 64px 16px;
}


/* here is the breakpoint for tablets */

@media screen and (min-width: 768px) and (max-width: 1439px) {
    
    .container {
        display: flex;
        align-items: center;
        margin: 56px 0;
    }
    
    .row-reversed {
        flex-flow: row-reverse;
    }

    .btn-primary {
        margin: 40px 0;
    }

    .full {
        width: 100%;
    }

}


/* here is the breakpoint for desktop */

@media screen and (min-width: 1440px) {

    .container {
        display: flex;
        align-items: center;
    }
    
    .row-reversed {
        flex-flow: row-reverse;
    }

    .btn-primary {
        margin: 40px 0;
    }

    .full {
        width: 100%;
    }

}