* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: 'Raleway', sans-serif;
}
/* ----MAIN PAGE ----
------ BACKGROUND ---- */
.background {
    min-height: 100vh;
    background-image: url("images/edgar-castrejon-vegan.jpg");
    background-color: #404040;
    background-blend-mode: overlay;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.container {
    width: 90%;
    margin: auto;
    /* border: 1px red solid; */
    display: flex;
    flex-direction: column;
}
/* ----MAIN PAGE ----
------ TOP PART ---- */
.head {
    text-align: center;
    margin-top: .5em;
}
.logo {
    height: 10vh; 
    object-fit: cover;
}
/* ----MAIN PAGE ----
------ NAVIGATION---- */
nav {
    margin-top: 2em;
    background-color: rgba(95, 95, 95, 0.496);
    padding: .5em;
    /* border: 1px solid green; */
}
nav ul {
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0;
}
nav li {
    list-style: none;
}
nav li a {
    text-transform: uppercase;
    text-decoration: none;
    font-size: .75rem;
    color: white;
    opacity: .6;
}

nav li a:hover,
nav li a:focus {
    opacity: 1;
}

/* ----COUPON PAGE ----
------COUPONS STYLE---- */
.coupons {
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.476);
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 2em 0;
}
.coupon {
    width: 80vw;
    border: 5px dotted rgba(255, 255, 255, 0.721);
    display: grid;
    grid-template: 4vw 30px 50px auto auto 4vw / 4vw 40vw 2vw 30vw 4vw;
    align-items: start;
    margin: 1em auto;
    background: black;
    color: white;
}
.coupon-logo {
    grid-row: 2/3;
    grid-column: 2;
    object-fit: cover;
    height: 100%;
    justify-self: left;
}
.coupon-img {
    grid-row: 2/4;
    grid-column: 4/-2;
    object-fit: cover;
    width: 100%;
    height: 100%;
    justify-self: right;
}
.bigger-img{
    grid-row: 2/5;
    height: 90%;
}
.coupon-title {
    grid-row: 3/5;
    grid-column: 2;
    font-size: 1rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.714);
}
.coupon-title span {
    display: block;
    font-size: 1.75rem;
    color: white;
}
.coupon-body {
    grid-row: 4;
    grid-column: 4/-2;
    font-size: .75rem;
    justify-self: right;
}
.coupon-condition {
    grid-row: 5;
    grid-column: 2;
    font-size: .5rem;
    align-self: start;
    margin: 0;
}

.coupon-btn {
    grid-row: 5;
    grid-column: 4/-2;
    text-decoration: none;
    border: 1px solid black;
    color: black;
    background: white;
    padding: .5em 1.5em;
    align-self: start;
    font-size: .75rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    transform: scale(1);
    transition: transform 250ms;
}
.coupon-btn:hover,
.coupon-btn:focus {
    font-weight: 800;
    transform: scale(1.05);
}
@media (min-width: 700px) {
    .coupons {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .coupon {
        width: 65vw;
        grid-template: 1vw 30px 50px auto auto 1vw / 1vw 36vw 1vw 25vw 1vw;
    }
}

@media (min-width: 900px) {
    .coupons {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .coupon {
        width: 35vw;
        grid-template: 1vw 30px 50px auto auto 1vw / 1vw 19vw 1vw 12vw 1vw;
    }
}


/* ----MAIN PAGE ----
------ FOOTER---- */
footer {
    background-color: rgba(95, 95, 95, 0.496);
    padding: .35em 3.5em;
    text-align: center;
    margin-top: auto;
}
footer p {
    color: white;
    opacity: .6;
    font-size: .5rem;
}

@media (min-width: 700px) {
    nav ul{
        width: 70%;
    }
}

@media (min-width: 900px) {
     footer p {
        font-size: .75rem;
    }
}