:root{
    --grey: #8695B3;
    --medium-gold: #e8b970;
    --night-blue: #010715;
    --font-samsung: 'SamsungSSHeadDig-Bold';
  }
  
  body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .container-grid{
    max-width: 1200px;
    max-height: 800px;
    width: 98%;
    font-family: 'Inter', sans-serif;
    display: grid;
    border: solid 2px var(--grey);
    color: white;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    position: relative;
    &:after{
      content: '';
      background-color: var(--night-blue);
      opacity: 0.7;
      width: 100%;
      height: 100%;
      display: block;
      z-index: -1;
      position: absolute;
    }
    p{
      font-weight: 900;
      margin: 0;
      display: flex;
      align-items: center;
    }
    div{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .taille-100px{
      height: 120px;
    }
    > :nth-child(1){
      grid-area: photo;
      height: 100%;
      width: 100%;
      max-width: 800px;
      border-right: solid 2px var(--grey);
      display: flex;
      align-items: flex-end;
      img{
        width: 100%;
      }
    }
    > :nth-child(2){
      grid-area: k;
      justify-content: end;
      align-items: start;
      padding: 1em;
      height: 100%;
      box-sizing: border-box;
      font-weight: 600;
      span{
        transform: translateY(15px);
      }
    }
  }
  .container-grid.visuel-date{
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
    grid-template-areas: 
      "photo  . . k k"
      "photo date date date date"
      "photo . . annee annee"
      "photo twitch twitch twitch logo"
      "photo samsung samsung sponso sponso";
    > :nth-child(3){
      grid-area: date;
      font-family: 'Inter-Italic', sans-serif;
      font-size: 5em;
      align-items: end;
      height: 100%;
      line-height: 0.7em;
      justify-content: center;
    }
    > :nth-child(4){
      grid-area: annee;
      font-family: 'Inter', sans-serif;
      font-size: 4em;
      align-items: start;
      height: 100%;
      font-weight: 600;
      color: var(--medium-gold);
    }
    > :nth-child(5){
      grid-area: twitch;
      font-size: 24px;
      border-top: solid 2px var(--grey);
      border-right: solid 2px var(--grey);
      height: 162px;
      flex-direction : column;
      font-weight: 600;
      text-align: left;
      align-items: start;
      padding-left: 1em;
      a{
        color: var(--medium-gold);
        text-decoration: none;
        transition: all ease-in-out 0.5s;
        &:hover{
          color: var(--grey);
        }
      }
    }
    > :nth-child(6){
      grid-area: logo;
      width: 100%;
      height: 162px;
      border-top: solid 2px var(--grey);
    }
    > :nth-child(7){
      grid-area: samsung;
      border-top: solid 2px var(--grey);
      div{
        flex-direction: column;
        align-items: start;
      }
    }
    > :nth-child(8){
      grid-area: sponso;
      border-top: solid 2px var(--grey);
      column-gap : 20px;
      align-items: flex-end;
      justify-content: start;
      flex-wrap: wrap;
      p{
        font-size: 0.9em;
        font-weight: 400;
        margin: 20px 0 0 0;
        width: 100%;
      }
      a{
        margin-bottom: 10px;
      }
    }
  }
.container-grid.visuel-annonce{  
   grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
    grid-template-areas: 
      "photo  . . k k"
      "photo live live live live"
      "photo date date date heure"
      "photo twitch twitch twitch logo"
      "photo samsung samsung sponso sponso";
    > :nth-child(3){
      grid-area: live;
      font-family: 'Inter-Italic', sans-serif;
      font-size: 5em;
      align-items: end;
      height: 100%;
      line-height: 0.7em;
      padding-left: 0.5em;
    }
    > :nth-child(4){
      grid-area: date;
      font-family: 'Inter', sans-serif;
      font-size: 5em;
      justify-content: end;
      align-items: start;
      height: 100%;
    }
    > :nth-child(5){
      grid-area: heure;
      font-family: 'Inter', sans-serif;
      font-size: 3em;
      align-self: start;
      font-weight: 700;
      color: var(--medium-gold);
      padding-left: 0.2em;
    }
    > :nth-child(6){
      grid-area: twitch;
      font-size: 24px;
      border-top: solid 2px var(--grey);
      border-right: solid 2px var(--grey);
      height: 162px;
      flex-direction : column;
      font-weight: 600;
      text-align: left;
      align-items: start;
      padding-left: 1em;
      a{
        color: var(--medium-gold);
        text-decoration: none;
        transition: all ease-in-out 0.5s;
        &:hover{
          color: var(--grey);
        }
      }
    }
    > :nth-child(7){
      grid-area: logo;
      width: 100%;
      height: 162px;
      border-top: solid 2px var(--grey);
    }
    > :nth-child(8){
      grid-area: samsung;
      border-top: solid 2px var(--grey);
    }
    > :nth-child(9){
      grid-area: sponso;
      border-top: solid 2px var(--grey);
      column-gap : 20px;
      align-items: flex-end;
      justify-content: start;
      flex-wrap: wrap;
      p{
        font-size: 0.9em;
        font-weight: 400;
        margin: 20px 0 0 0;
        width: 100%;
      }
      a{
        margin-bottom: 10px;
      }
    }
}

  @media screen and (max-width: 1075px) {
    .container-grid.visuel-date{
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas: 
        " . k k"
      "date date date"
      " . annee annee"
      " twitch twitch logo"
      "samsung sponso sponso";
      }
    .container-grid > :nth-child(1){
      display: none;
    }
    .container-grid.visuel-annonce{
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas: 
        " . k k"
        "live live live"
        "date date heure"
        "twitch twitch logo"
        "samsung sponso sponso";
      }
  }
  @media screen and (max-width: 645px) {
    .container-grid{
        max-height: none;
    }
    .container-grid.visuel-date > :nth-child(3),
    .container-grid.visuel-date > :nth-child(4),
    .container-grid.visuel-annonce > :nth-child(3),
    .container-grid.visuel-annonce > :nth-child(4){
      font-size: 3em;
    }
  }
  @media screen and (max-width: 500px) {
    .container-grid.visuel-date{
      grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
      grid-template-areas: 
        "k"
        "date"
        "annee"
        "twitch"
        "logo"
        "samsung"
        "sponso";
      > :nth-child(4){
        justify-content: center;
      }
      > :nth-child(7){
        border-right: none;
      }
      > :nth-child(8) {
        border-top :none;
        align-items: start;
        justify-content: center;
        p{
          align-self: center;
          margin-right: 0;
        }
      }
    }
    .container-grid.visuel-annonce{
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
        grid-template-areas: 
        "k"
        "live"
        "date"
        "heure"
        "twitch"
        "logo"
        "samsung"
        "sponso";
        > :nth-child(3){
            line-height: 1.2em;
        }
        > :nth-child(4), > :nth-child(5){
            justify-content: center;
        }
        > :nth-child(6){
            border-right: none;
        }
        > :nth-child(9) {
        border-top :none;
        align-items: start;
        justify-content: center;
            p{
            align-self: center;
            margin-right: 0;
            }
        }
    }
  }