html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    width: 100%;
}

.hero-windows {
    height: calc(100% - 97px);
    width: 100%;
}

.grid {
    height: 100%;
    width: 100%;
}

.GR {
    height: 100%;
    background-image: url(../../image/hero/scratch-hero.png);
    background-size:cover;
    background-position: center;
}

.MR {
    height: 100%;
    background-image: url(../../image/hero/pac-man-hero.png);
background-size:cover;
background-position: center;
}

.PR {
    height: 100%;
background-size:cover;
background-position: center;
}

.PR1 {
background-image: url(../../image/hero/graffiti-hero.jpg);
background-position: left;
}

.PR2 {
    background-image: url(../../image/hero/jazz-hero.jpg);
}

.PR3 {
    background-image: url(../../image/hero/basket-hero.jpg);
}
.PR4 {
    background-image: url(../../image/hero/science-et-vie-hero.png);
}

.PR5 {
    background-image: url(../../image/hero/canva-hero.jpg);
}
.PR6 {
    background-image: url(../../image/hero/il-etait-une-fois-la-vie-hero.png);
}

.PR7 {
    background-image: url(../../image/hero/charlie-chaplin-hero.png);
}
.PR8 {
    background-image: url(../../image/hero/monde-ado-hero.png);
}


.title-hero {
    padding: 24px;
    position: absolute;
}



.overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    padding: 8px;
    transition: 300ms opacity ease;
}



.GR:hover .title-hero {
    display: none;
}

.MR:hover .title-hero {
    display: none;
}

.PR:hover .title-hero {
    display: none;
}

.GR:hover .overlay {
opacity: 1;
}

.MR:hover .overlay {
    opacity: 1;
}

.PR:hover .overlay {
    opacity: 1;
}

.overlay-fixed-grid {
height: 100%;
}

.overlay-grid {
    height: 100%;
}
.overlay-grid-PR {
    column-gap: 3px;
    row-gap: 3px;
}
.icon-hero-GR {
    width: 120px;
    height: 120px;
    background-image: url(../../image/icon/scratch-icon.png);
    background-position: center;
}

.icon-hero-MR {
    width: 120px;
    height: 120px;
    background-image: url(../../image/icon/pac-man-icon.jpg);
    background-position: center;
    background-size: cover;
}

.icon-hero-PR1 {
    width: 68px;
    height: 68px;
    background-image: url(../../image/icon/graffiti-icon.png);
   background-position: center;
}

.icon-hero-PR2 {
width: 68px;
height: 68px;
    background-image: url(../../image/icon/jazz-icon.png);
    background-position: center;
}

.icon-hero-PR3 {
    width: 68px;
    height: 68px;
    background-image: url(../../image/icon/FFBB-icon.png);
    background-position: center;
}

.icon-hero-PR4 {
    width: 68px;
    height: 68px;
    background-image: url(../../image/icon/science-vie-icon.png);
    background-position: center;
}

.icon-hero-PR5 {
    width: 68px;
    height: 68px;
    background-image: url(../../image/icon/canva-icon.png);
    background-position: center;
}

.icon-hero-PR6 {
    width: 68px;
    height: 68px;
    background-image: url(../../image/icon/il-etait-une-fois-la-vie-icon.png);
    background-position: center;
}

.icon-hero-PR7 {
    width: 68px;
    height: 68px;
    background-image: url(../../image/icon/charlie-chaplin-icon.png);
    background-position: center;
}

.icon-hero-PR8 {
    width: 68px;
    height: 68px;
    background-image: url(../../image/icon/monde-ado-icon.png);
    background-position: center;
}

.title-tag {
    height: 120px;
}

.title-tag-PR {
    height: 68px;
}
.is-title-overlay {
    text-shadow: 0px 4px 4px rgb(0, 0, 0, 0.8);
}

.tag-overlay-GR-MR {
    padding: 0 15px;
    height: 27px;
    text-align: center;
    border-radius: 100px;
 }
 .tag-overlay-PR {
    padding: 0 8px;
    height: 27px;
    text-align: center;
    border-radius: 5px;
 }

.desc-overlay-GR-MR {
    height: 180px;
}

.desc-overlay-PR {
    height: 70px;
}


 .more {
    float: left;
    background-color: var(--yellow);
    border-radius: 15px;
 }

 .more-PR {
    float: left;
    background-color: var(--yellow);
    border-radius: 8px;
 }


 .play {
    float: right;
    background-color: var(--light);
    border-radius: 15px;
    width: 129px;
 }

 .play-PR {
    float: right;
    background-color: var(--light);
    border-radius: 8px;
    width: 69.01px;
 }

 .bouton {
    width: 100%;
padding: 15px 20px;
border-radius: 15px;
transition-property: backdrop-filter;
transition-duration: 200ms;
 }
 
 .bouton:hover {
    backdrop-filter: brightness(75%);
 }

 .bouton-PR {
        width: 100%;
padding: 10px 10px;
border-radius: 8px;
transition-property: backdrop-filter;
transition-duration: 200ms;
 }
 
 .bouton-PR:hover {
    backdrop-filter: brightness(75%);
 }