wondif_vue/app/components/BannierePros.vue

<!-- Utilisé pour : -->
<!-- Index.vue / Encart PROS bas de page -->

<template>
    <div class="banniere_pros_wp">
        <div class="studio_img">
            <DsMedia src="/contenus/studio_img_1.webp" alt="Image du studio pro" ratio="16-9" />
        </div>
        <div class="banniere_pros--description studio_description">
            <div>
                <img src="/img/logos/logo_le_studio_noir.png" alt="Logo du studio pro" width="200">
            </div>
            <DsHeading as="h5" tone="default" class="banniere_pros--description--titre">
                On enregistre au studio !
            </DsHeading>
            <DsText as="p" tone="default" :clamp="3">
                Un grand studio modulaire ouvert à tous les professionnels aux portes de Paris
            </DsText>
        </div>
        <div class="parc_img">
            <DsMedia src="/contenus/studio_img_2.webp" alt="Image du studio pro" ratio="16-9" />
        </div>
        <div class="banniere_pros--description parc_description">
            <div>
                <img src="/img/logos/logo_le_parc_noir.png" alt="Logo du parc instrumental pro" width="150">
            </div>
            <DsHeading as="h5" tone="default" class="banniere_pros--description--titre">
                + de 3 000 instruments en location
            </DsHeading>
            <DsText as="p" tone="default" :clamp="3">
                Location d’instruments de musique pour les professionnels et les amateurs
            </DsText>
        </div>
    </div>
</template>

<script setup>
    import DsMedia from '@root/design-system/primitives/DsMedia.vue'
    import DsText from '@root/design-system/primitives/DsText.vue'
    import DsHeading from '@root/design-system/primitives/DsHeading.vue'
</script>

<style lang="scss">
    .banniere_pros_wp {
        display: grid;
    }

    @media (max-width: 599px) {
        .banniere_pros_wp {
            padding-left: 10px;
        }
    }

    @media (min-width: 500px) {
        .banniere_pros_wp {
            row-gap: 50px;
        }
    }
    @media (max-width: 399px) {
        .banniere_pros_wp {
            grid-template-columns: 30px 240px;
            grid-template-rows: 130px 60px 130px 42px 111px 70px 140px;
            //justify-content: center;
            .ds-media--16-9 {
                aspect-ratio: 4 / 3;
            }
        }
    }
    @media (min-width: 400px) {
        .banniere_pros_wp {
            grid-template-columns: 80px 290px;
            grid-template-rows: 150px 60px 130px 42px 170px 70px 140px;
            //justify-content: center;
            .ds-media--16-9 {
                aspect-ratio: 4 / 3;
            }
        }
    }
    @media (min-width: 500px) {
        .banniere_pros_wp {
            grid-template-columns: 150px 270px 40px 40px;
            grid-template-rows: auto;
            //justify-content: center;
            align-items: center;
            .ds-media--16-9 {
                aspect-ratio: 16 / 9;
            }
        }
    }
    @media (min-width: 600px) {
        .banniere_pros_wp {
            grid-template-columns: 220px 250px 40px 40px;
            grid-template-rows: auto;
            //justify-content: center;
            align-items: center;
            .ds-media--16-9 {
                aspect-ratio: 16 / 9;
            }
        }
    }
    @media (min-width: 700px) {
        .banniere_pros_wp {
            grid-template-columns: 220px 250px 40px 40px;
            grid-template-rows: auto;
            //justify-content: center;
            align-items: center;
            .ds-media--16-9 {
                aspect-ratio: 16 / 9;
            }
        }
    }
    @media (min-width: 800px) {
        .banniere_pros_wp {
            grid-template-columns: 100px 190px 20px 40px 110px 140px 160px;
            grid-template-rows: auto;
            align-items: center;
            .ds-media--16-9 {
                aspect-ratio: 4 / 3;
            }
        }
    }
    @media (min-width: 900px) {
        .banniere_pros_wp {
            grid-template-columns: 130px 190px 40px 30px 160px 130px 169px;
            grid-template-rows: auto;
            align-items: center;
            .ds-media--16-9 {
                aspect-ratio: 4 / 3;
            }
        }
    }

    @media (min-width: 1000px) {
        .banniere_pros_wp {
            grid-template-columns: 160px 200px 90px 50px 160px 150px 150px;
            grid-template-rows: auto;
            align-items: center;
            .ds-media--16-9 {
                aspect-ratio: 16 / 9;
            }
        }
    }

    @media (min-width: 1100px) {
        .banniere_pros_wp {
            grid-template-columns: 200px 200px 100px 50px 200px 150px 150px;
            grid-template-rows: auto;
            align-items: center;
            .ds-media--16-9 {
                aspect-ratio: 16 / 9;
            }
        }
    }

    @media (min-width: 1200px) {
        .banniere_pros_wp {
            grid-template-columns: 230px 200px 100px 50px 230px 150px 150px;
            grid-template-rows: auto;
            align-items: center;
            .ds-media--16-9 {
                aspect-ratio: 16 / 9;
            }
        }
    }

    @media (min-width: 1300px) {
        .banniere_pros_wp {
            grid-template-columns: 270px 200px 100px 50px 270px 150px 150px;
            grid-template-rows: auto;
            align-items: center;
            .ds-media--16-9 {
                aspect-ratio: 16 / 9;
            }
        }
    }

    @media (min-width: 1400px) {
        .banniere_pros_wp {
            grid-template-columns: 320px 200px 100px 50px 320px 150px 150px;
            grid-template-rows: auto;
            align-items: center;
            .ds-media--16-9 {
                aspect-ratio: 16 / 9;
            }
        }
    }



    /* IMAGES */
    .studio_img {
        grid-column: 1 / 3;
        grid-row: 1;
        z-index: 1;
    }
    @media (max-width: 499px) {
        .studio_img {
            grid-column: 1 / 3;
            grid-row: 1/2;
            z-index: 1;
        }
    }

    .parc_img {
        grid-column: 4 / 7;
        grid-row: 1;
        z-index: 1;
    }
    @media (max-width: 799px) {
        .parc_img {
            grid-column: 1 / 3;
            grid-row: 2;
            z-index: 1;
        }
    }
    @media (max-width: 499px) {
        .parc_img {
            grid-column: 1 / 3;
            grid-row: 5/6;
            z-index: 1;
        }
    }

    /* DESCRIPTIONS (au-dessus des images) */
    .studio_description {
        grid-column: 2 / 5;
        grid-row: 1;
        z-index: 2;
    }
   @media (max-width: 499px) {
        .studio_description {
            grid-column: 2;
            grid-row: 2/4;
            z-index: 2;
        }
    }

    .parc_description {
        grid-column: 6 / 8;
        grid-row: 1;
        z-index: 2;
    }
    @media (max-width: 799px) {
        .parc_description {
            grid-column: 2 / 5;
            grid-row: 2;
            z-index: 2;
        }
    }
   @media (max-width: 499px) {
        .parc_description {
            grid-column: 2;
            grid-row: 6/8;
            z-index: 2;
        }
    }

    .banniere_pros--description {
        background-color: var(--c-background-blanc-casse);
        padding: 17px;
        max-height: 170px;
        &--titre {
            font-size: 18px;
        }
    }
</style>