.offers-container {

    display: flex;
    flex-direction: column;

    justify-content: space-between;
    align-items: center;

    width: 100%;
    height: auto;

    padding: 2em 2em 2em 2em;

    gap: 1em;
}

#offers-brief p {
    text-align: center;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

.offer-links {
    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: center;

    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0em;
    margin-inline-end: 0em;

    padding: 1em 0em;

    border-top: 1px dotted rgba(58,154,54,1);
    border-bottom: 1px dotted rgba(58,154,54,1);

    text-align: center;
    list-style: none;
}

.offer-link a:before,
.offer-link a:after {
    position: relative;
    top: 0em;
    left: 0em;

    height: 1em;
    width: 1em;

    content: '';

    opacity: 0;

    transition: all 0.5s ease-in-out;
}

.offer-link a:before {
    position: relative;
    float: left;

    border-left: 0.3em solid;
    border-top: 0.3em solid;

    transform: translate(0.5em, -0.5em);

    opacity: 0;
}

.offer-link a:after {
    position: relative;
    float: right;

    border-right: 0.3em solid;
    border-bottom: 0.3em solid;

    transform: translate(-0.5em, 0.5em);

    opacity: 0;
}

.offer-link a:hover,
.offer-link a:hover:before,
.offer-link a:hover:after {
    opacity: 1;
}

.offer-link a:hover:before {
    transform: translate(-0.1em, -1em);
}

.offer-link a:hover:after {
    transform: translate(0.1em, 1em);
}

.offers-list {
    display: flex;
    flex-direction: column;

    justify-content: space-between;
    align-items: center;

    padding-top: 7vh;
    gap: 3vh;
}

.offer {
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: row;

    justify-content: flex-start;
    align-items: flex-start;

    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.offer-picto {
    flex: 1 1 30%;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0em;
    margin-inline-end: 0em;
}

.offer-description {
    flex: 1 1 60%;

    order: 2;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 2em 2em;
}

.offer-description h2 {
    margin-block-start: 0em;
    margin-block-end: 0.5em;
}

.offer-description h3 {
    margin-block-start: 0.5em;
    margin-block-end: 1em;
}

.offer-description p {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

.offer-description ul {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

.offers-list .offer:nth-child(odd) {
    background-image: url("../assets/bg-offer-left.png");
    background-image: image-set(
        url("../assets/bg-offer-left.webp") type("image/webp"),
        url("../assets/bg-offer-left.png") type("image/png")
    );
    padding-right: 10%;
}

.offers-list .offer:nth-child(odd) .offer-picto {
    order: 1;

    position: relative;
    top: -3vh;
    left: -3vh;    
}

.offers-list .offer:nth-child(odd) .offer-picto img {
    border: 3vh solid rgba(32,56,100,1);    
    box-shadow: 0.4em 0.4em 0.4em rgba(0,0,0,0.25);      
}

.offers-list .offer:nth-child(even) {
    background-image: url("../assets/bg-offer-right.png");
    background-image: image-set(
        url("../assets/bg-offer-right.webp") type("image/webp"),
        url("../assets/bg-offer-right.png") type("image/png")
    );
    padding-left: 12%;
}

.offers-list .offer:nth-child(even) .offer-picto {
    order: 3;

    position: relative;
    top: -3vh;
    left: 3vh;
}

.offers-list .offer:nth-child(even) .offer-picto img {
    border: 3vh solid rgba(56,87,35,1);
    box-shadow: -0.4em 0.4em 0.4em rgba(0,0,0,0.25);      
}

@media screen and (max-width: 1336px) {

}

@media screen and (max-width: 1280px) {
    .offers-list {
        gap: 6vh;
    }

    .offer {
        flex-direction: column;
        justify-content: start;
        align-items: center;
    }

    .offers-list .offer:nth-child(odd) {
        justify-content: start;
        padding: 0em;

        background-image: none;
        box-shadow: 0.4em 0.4em 0.4em rgba(0,0,0,0.5);
        background-color: rgba(32,56,100,1);
        border-right: 4vh solid rgba(0,115,178,1);
    }

    .offers-list .offer:nth-child(odd) .offer-picto {
        position: relative;
        left: 0vh;   
    }

    .offers-list .offer:nth-child(odd) .offer-picto img {
        border: 3vh solid rgba(32,56,100,1);    
        box-shadow: 0em 0.4em 0.4em rgba(0,0,0,0.25);
    }

    .offers-list .offer:nth-child(odd) .offer-description {
        padding-top: 0em;
    }

    .offers-list .offer:nth-child(even) {
        justify-content: start;
        padding: 0em;

        background-image: none;
        box-shadow: 0.4em 0.4em 0.4em rgba(0,0,0,0.5);
        background-color: rgba(56,87,35,1);
        border-left: 4vh solid rgba(58,154,54,1);
    }

    .offers-list .offer:nth-child(even) .offer-picto {
        position: relative;
        left: 0vh;
        order: 1;  
    }

    .offers-list .offer:nth-child(even) .offer-picto img {
        border: 3vh solid rgba(56,87,35,1);
        box-shadow: 0em 0.4em 0.4em rgba(0,0,0,0.25);
    }

    .offers-list .offer:nth-child(even) .offer-description {
        padding-top: 0em;
    }
    
}

@media screen and (max-width: 768px) {
    .offers-list {
        padding-top: 3vh;
        gap: 3vh;
    }

    .offer-links {
        display: none;
    }

    .offers-list .offer:nth-child(odd) {
        border-right: 0vh solid rgba(0,115,178,1);
        border-top: 1em solid rgba(0,115,178,1);
        
    }
    .offers-list .offer:nth-child(odd) .offer-picto {
        top: 0vh;
        padding: 1em;
    }
    .offers-list .offer:nth-child(odd) .offer-picto img {
        border: 0vh solid rgba(32,56,100,1);    
    }

    .offers-list .offer:nth-child(even) {
        border-left: 0vh solid rgba(58,154,54,1);
        border-top: 1em solid rgba(58,154,54,1);
        
    }
    .offers-list .offer:nth-child(even) .offer-picto {
        top: 0vh;
        padding: 1em;
    }
    .offers-list .offer:nth-child(even) .offer-picto img {
        border: 0vh solid rgba(56,87,35,1);
    }
}

@media screen and (max-width: 480px) {
    
}