Block About Store

.block-about-store {
   display: flex;
   flex-wrap: wrap;
   background: $c-brown-lightest;
   border-radius: 0 0 $border-radius-l $border-radius-l;
   overflow: hidden;
   width: 100%;

   h3 {
      font-size: rem(32);
   }

   &__hours {
      padding: $margin-m;

      @include mediaWQuery($media-query-m) {
         width: 50%;
         padding: $margin-l;
      }
   
      table {
         table-layout: fixed;
         width: 100%;
         background: transparent;
      }

      table tr {
         display: flex;
         flex-wrap: wrap;
         padding: .2rem 1rem;
         margin: 0 -1rem;
         width: calc(100% + 2rem);

         @include mediaWQuery($media-query-s) {
            flex-direction: row;
         }

         @include mediaWQuery($media-query-m) {
            padding: .5rem 1rem;
            margin: 0;
            width: 100%;
         }

         @include mediaWQuery($media-query-l) {
            padding: 0 .5rem;
         }

         &.current-hours {
            background: $c-yellow;
            font-weight: 700;

            @include mediaWQuery($media-query-m) {
               border-radius: 30px;
            }
         }
      }

      table tr td {
         font-weight: 400;
         padding: 0;
         margin: 0;
         line-height: 1;

         @include mediaWQuery($media-query-xs) {
            width: 50%;
            &:first-child { width: 100% }
         }

         @include mediaWQuery($media-query-s) {
            line-height: 1.5;
            &, &:first-child { width: 33% }
         }

         @include mediaWQuery($media-query-m) {
            width: 50%;
            &:first-child { width: 100% }
         }

         @include mediaWQuery($media-query-l) {
            &, &:first-child { width: 33% }
         }
      }

      table tr.current-hours td { font-weight: 700 }
   }

   &__infos {
      display: grid;
      padding: $margin-m;
      width: 100%;

      @include mediaWQuery($media-query-xs) {
         grid-template-columns: 1fr auto;
         grid-template-rows: auto 1fr auto;

         h3, .button { grid-column: span 2 }
      }

      @include mediaWQuery($media-query-m) {
         width: 50%;
         padding: $margin-l;
      }

      &-utils {
         margin: 0;
         p { margin-top: 0 }
      }

      // Bouton 'open Google Maps'
      > a {
         margin-top: $margin-m;

         @include mediaWQuery($media-query-xs) {
            margin-top: 0;
            text-align: center;
            text-decoration: none;
            line-height: 1.1;
            color: $c-font-color;
            font-size: rem(14);
            font-weight: 700;
         }

         .icon {
            display: none;
            
            @include mediaWQuery($media-query-xs) {
               display: flex;
               align-items: center;
               justify-content: center;
               margin: 0 auto .2rem;
               width: 75px;
               height: 75px;
               background: $c-yellow;
               border-radius: 100%;
               transition: .3s ease;
               &::after { transition: .3s ease }
            }
         }

         &:hover, &:focus {
            .icon {
               background: $c-yellow-dark;
               &::after { transform: translateY(3px) }
            }
         }
      }

      .button {
         width: 100%;
         margin-top: 2rem;
         @include mediaWQuery($media-query-m) { margin-top: 1rem }
      }
   }

   &__facebook {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      background-color: $c-brown-lighter;
      padding: $margin-m;

      @include mediaWQuery($media-query-m) {
         padding: $margin-m $margin-l;
      }
   }
}