@import url('https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap');
body{
  height: fit-content;
}

main{
  width: 100dvw;
  height: auto;
}

section.bros__copy{
  height: calc(60vh - 60px);
  margin-top: 60px;
}
  .bros__copy__inner{
    padding: 40px 20px 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
    .bros__copy__image__wrapper{
      width: 30%;
      height: 100%;
      padding: 70px;
    }
      .bros__copy__image__wrapper img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    .bros__copy__inner__text{
      width: 40%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 30px;
    }
      .bros__copy__inner__text h3{
        font-family: "Nothing You Could Do", cursive;
        font-size: 40px;
        font-weight: 400;
        letter-spacing: 0.1em;
      }
      .bros__copy__inner__text p{
        font-size: var(--desc-font-size);
        letter-spacing: 0.1em;
        line-height: 1.4rem;
      }

section.gallery{
  width: 100vw;
  height: fit-content;
  padding: 80px 0 100px;
}
  .gallery__inner{
    width: 100%;
    height: fit-content;

    display: flex;
    justify-content: center;
    padding: 0 30px;
  }
    .gallery__inner__grid{
      width: 100%;
      height: 100vw;
    }
      .gallery__inner__grid__wrapper{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(9, 1fr);
        grid-column-gap: 15px;
        grid-row-gap: 15px;
      }
        .gallery__item{
          border-radius: 30px;
          border: 1px var(--black) solid;
          transition: 1s ease;
        }
        .gallery__item:hover{
          border:1px solid transparent;
        }
        .item-1{   grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 5;}
        .item-2{   grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3;}
        .item-3{   grid-column-start: 5; grid-column-end: 8; grid-row-start: 1; grid-row-end: 3;}
        .item-4{   grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 7;}
        .item-5{   grid-column-start: 3; grid-column-end: 6; grid-row-start: 3; grid-row-end: 5;}
        .item-6{   grid-column-start: 6; grid-column-end: 8; grid-row-start: 3; grid-row-end: 7;}
        .item-7{   grid-column-start: 2; grid-column-end: 6; grid-row-start: 5; grid-row-end: 7;}
        .item-8{   grid-column-start: 1; grid-column-end: 8; grid-row-start: 7; grid-row-end: 10;}
          .gallery__item a{
            width: 100%;
            height: 100%;
          }
            .gallery__item__inner{
              position: relative;
              width: 100%;
              height: 100%;
            }
              .gallery__item__inner__texts{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 30px;

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

                padding: 30px;

                background-color: var(--white);
                transition: 1s ease;
              }
              .gallery__item__inner__texts:hover{
                background-color: transparent;
                transition: 1s ease;
              }
                .gallery__item__inner__texts h3{
                  text-align: left;
                  color: var(--black);
                  transition: 1s ease;
                }
                .gallery__item__inner__texts h4{
                  text-align: right;
                  color: var(--black);
                  transition: 1s ease;
                }
                .gallery__item__inner__texts:hover h3{ color: var(--white); }
                .gallery__item__inner__texts:hover h4{ color: var(--white); }
              .gallery__item__inner img{
                width: 100%;
                height: 100%;
                border-radius: 30px;

                object-fit: cover;
              }
              .gallery__item__inner__over{
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;

                width: 100%;
                height: 100%;
                border-radius: 30px;

                background-color: var(--white);
                visibility: visible;

                transition: 1s;
              }
              .gallery__item__inner:hover .gallery__item__inner__over{
                opacity: 0;
                background-color: transparent;
                visibility: hidden;
              }
              .gallery__item__inner__map{
                position: absolute;
                top: 0;
                left: 0;

                width: 100%;
                height: 100%;
                border-radius: 30px;
                z-index: 0;
              }
                .gallery__item__inner__map iframe{
                  width: 100%;
                  height: 100%;
                  border-radius: 30px;
                  object-fit: cover;
                  filter: grayscale(1);
                }







@media screen and (max-width: 768px){
section.bros__copy{
  height: calc(70vh - 60px);
  margin-top: 60px;
}
  .bros__copy__image__wrapper{

    padding:0 40px 0 0;
  }
    .bros__copy__inner__text h3{
      font-size: 20px;
    }
    .bros__copy__inner__text p{
      font-size: 0.5rem;
    }
  .gallery__inner{
    width: 100%;
    height: fit-content;

    display: flex;
    justify-content: center;
    padding: 0 30px;
  }
    .gallery__inner__grid{
      width: 1200px;
      height: 1200px;
    }
        .item-1{   grid-column-start: 1; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3;}
        .item-2{   grid-column-start: 5; grid-column-end: 8; grid-row-start: 1; grid-row-end: 2;}
        .item-3{   grid-column-start: 1; grid-column-end: 3; grid-row-start: 5; grid-row-end: 6;}
        .item-4{   grid-column-start: 1; grid-column-end: 3; grid-row-start: 6; grid-row-end: 10;}
        .item-5{   grid-column-start: 1; grid-column-end: 5; grid-row-start: 3; grid-row-end: 5;}
        .item-6{   grid-column-start: 5; grid-column-end: 8; grid-row-start: 2; grid-row-end: 5;}
        .item-7{   grid-column-start: 3; grid-column-end: 8; grid-row-start: 5; grid-row-end: 7;}
        .item-8{   grid-column-start: 3; grid-column-end: 8; grid-row-start: 7; grid-row-end: 10;}
}






@media screen and (max-width: 440px){
  .bros__copy__inner{
    padding: 40px 20px 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
    .bros__copy__image__wrapper{
      width: 100%;
      padding: 30px;
    }
    .bros__copy__inner__text{
      width: 100%;
      gap: 10px;
    }
      .bros__copy__inner__text h3{
        font-size: 25px;
      }
      .bros__copy__inner__text p{
        font-size: 0.5rem;
      }

  .gallery__inner{
    width: 100%;
    height: fit-content;

    display: flex;
    justify-content: center;
    padding: 0 10px;
  }
    .gallery__inner__grid{
      width: 1200px;
      height: auto;
    }
      .gallery__inner__grid__wrapper{
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(9, 120px);
        grid-column-gap: 20px;
      }
        .gallery__item{
          border-radius: 15px;
          border: 1px var(--black) solid;
          transform: 1s;
        }
        .gallery__item:hover{
          border: unset;
        }
        .item-1{   grid-column-start: 1; grid-column-end: 8; grid-row-start: 1; grid-row-end: 2;}
        .item-2{   grid-column-start: 1; grid-column-end: 8; grid-row-start: 2; grid-row-end: 3;}
        .item-3{   grid-column-start: 1; grid-column-end: 8; grid-row-start: 3; grid-row-end: 4;}
        .item-4{   grid-column-start: 1; grid-column-end: 8; grid-row-start: 4; grid-row-end: 5;}
        .item-5{   grid-column-start: 1; grid-column-end: 8; grid-row-start: 5; grid-row-end: 6;}
        .item-6{   grid-column-start: 1; grid-column-end: 8; grid-row-start: 6; grid-row-end: 7;}
        .item-7{   grid-column-start: 1; grid-column-end: 8; grid-row-start: 7; grid-row-end: 8;}
        .item-8{   grid-column-start: 1; grid-column-end: 8; grid-row-start: 8; grid-row-end: 10;}
        .gallery__item__inner__texts{ border-radius: 15px; }
        .gallery__item__inner__over{ display: none; }
        .gallery__item__inner img{ border-radius: 15px; }
        .gallery__item__inner__map{ border-radius: 15px; }
        .gallery__item__inner__map iframe{ border-radius: 15px; }
    .gallery__item__inner__texts{
      padding: 15px;
    }
}