/* CHOSEN PRODUCTS */
.products {
    display: grid;
    grid-template-columns: 1fr 2fr 169px;
    background-color: #F5F7F9;
    margin: 0 auto;
    padding: 9.375rem 9.375%;
}

.products__header {
    grid-area: 1 / 1 / 2 / 2;
    padding-left: 1.75rem;
}

.products__header--span {
    color: #939FA4;
}

.products__button {
    grid-area: 4 / 3 / 5 / 4;
}

.offer {
    display: grid;
    grid-template-columns: 40% 2fr;
    position: relative;
    align-items: center;
    height: 11.58rem;
    max-width: 1198px;
    width: 100%;
    margin: 0 auto 4.213125rem 3.782639%;
    border-radius: 5px;
    background-color: #FFFFFF;
}

.offer:first-of-type {
    margin-top: 3.375rem;
}

.offer__picture {
    background-color: #FFE9E9;
    padding: 0.9778125rem 0;
    width: 271px;
    position: absolute;
    left: -13.782639%;
    grid-area: 1 / 1 / 2 / 2;
}

.offer__picture--img {
    width: 105px;
    height: 134px;
    margin: 0 auto;
}

.offer__amount {
    text-align: left;
    height: 3.625rem;
    width: 100%;
    grid-area: 1 / 2 / 2 / 4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 670px;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;

}

.offer__title {
    padding-bottom: 3px;
}

.offer__description {
    color: #939FA4;
}

.offer__amounts {
    display: flex;
}

/* PRICES */
#result1,
#result2 {
    width: 56px;
    height: 57px;
    background-color: #F9C4D2;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Rubik", sans-serif;
    font-weight: bold;
    font-style: normal;

}

.xmark {
    position: absolute;
    right: 1.470625rem;
    top: 1.470625rem;
    border: none;
    background-color: #FFFFFF;
    width: 7.85px;
    height: 7.85px;
    cursor: pointer;
}

.offer:first-of-type {
    grid-area: 2 / 1 / 3 / -1;
}

.offer:last-of-type {
    grid-area: 3 / 1 / 4 / -1;
}



/* MEDIA QUERIES TABLET */
@media screen and (max-width: 768px) {
    .products {
        padding: 4.375rem 9.375%;
    }

    .offer {
        max-width: 740px;
        margin: 0 auto 2.213125rem 2%;
    }

    .offer:first-of-type {
        margin-top: 1.375rem;
    }

    .offer__amount {
        grid-template-columns: repeat(2, 1fr);
        align-self: start;
        padding-top: 8%;
        justify-items: center;
    }

    .offer__info {
        grid-area: 1 / 1 / 2 / 2;
        padding-bottom: 10%;
    }

    .offer__amounts {
        grid-area: 2 / 1 / 3 / -1;
    }

    .offer__price {
        grid-area: 1 / 2 / 2 / -1;
        padding-bottom: 10%;
        align-self: start;
    }
}

/* MEDIA QUERIES MOBILE */
@media screen and (max-width: 360px) {
    .products {
        padding: 2.375rem 0%;
        overflow: hidden;
    }

    .products>.offer:first-of-type+.offer {
        /* forklaring: 
        .products> = elementer der er direkte inde i .products
        .offer:first-of-type = det første element med class="offer"
        + .offer = det næste .offer der kommer lige efter det første 
        */
        margin-top: 2rem;
    }

    .products__button {
        margin-top: 4.5rem;
        justify-self: center;
        grid-area: 4 / 1 / 5 / -1;
    }

    .offer {
        max-width: 340px;
        width: 100%;
        min-height: 25rem;
        height: 100%;
        margin: 0 auto;
        align-content: start;
        padding-top: 10%;
    }

    .offer__picture {
        top: 20%;
        left: 14%;
        right: 14%;
    }

    .offer__amount {
        padding-top: 65%;
        grid-area: 3 / 1 / 4 / -1;
        align-items: center;
        justify-items: center;
    }

    .xmark {
        top: 2%;
        right: 5%;
    }
}