@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

:root {
  --color-space-cadet : #2b2d42;
  --color-manatee     : #e7eaee;
  --color-alice-blue  : #edf2f4;
  --color-imperial-red: #ef233c;
  --color-amaranth-red: #d90429;
}

* {
  padding   : 0;
  margin    : 0;
  box-sizing: border-box;
}

html,
body {
  font-size       : 62.5%;
  font-family     : 'Barlow', sans-serif;
  letter-spacing  : 1.2px;
  width           : 100%;
  display         : flex;
  background-color: var(--color-alice-blue);
}

.container {
  width : min(76vw, 1440px);
  margin: 8vw auto;
}

.button {
  border          : none;
  outline         : none;
  background-color: var(--color-imperial-red);
  color           : white;
  font-size       : clamp(1.2rem, 1.2vw, 1.6rem);
  padding         : 1em 2em;
  text-transform  : uppercase;
  cursor          : pointer;
  width           : max-content;
}

.button:hover {
  background-color: var(--color-amaranth-red);
}

.heading-1 {
  font-size  : clamp(3rem, 2.5vw, 4rem);
  font-weight: 600;
}

.heading-2 {
  font-size  : clamp(2rem, 2vw, 3rem);
  font-weight: 500;
}

.heading-3 {
  font-size  : clamp(1.5rem, 1.5vw, 2.4rem);
  font-weight: 500;
}

.heading-4 {
  font-size  : clamp(1.5rem, 1.5vw, 2rem);
  font-weight: 400;
}

.heading-5 {
  font-size  : clamp(1.2rem, 1.2vw, 1.6rem);
  font-weight: 400;
}

.text-1 {
  font-size  : clamp(1.2rem, 1.2vw, 1.6rem);
  font-weight: 300;
}

.text-2 {
  font-size  : clamp(1.2rem, 1vw, 1.5rem);
  font-weight: 300;
}

.text-3 {
  font-size  : clamp(1rem, 0.75vw, 1.2rem);
  font-weight: 200;
}

.navbar {
  background-color: var(--color-amaranth-red);
  height          : 100%;
  width           : min(6vw, 8rem);
  display         : flex;
  justify-content : center;
}

.hamburger-icon {
  margin        : 2rem 1.5rem;
  display       : flex;
  gap           : 1.2rem;
  flex-direction: column;
  position      : fixed;
  cursor        : pointer;
}

.hamburger-icon span {
  width        : min(4vw, 5rem);
  border-bottom: 2px solid white;
}

.content {
  width: 100%;
}

.header {
  display   : flex;
  min-height: 100vh;
}

.header__hero {
  flex           : 4;
  background     : linear-gradient(to right, #2b2d42ef, #2b2d42e5), url(./img/hero.jpeg) no-repeat;
  background-size: cover;
  padding        : 5vh 8vw;
  ;
  display        : flex;
  flex-direction : column;
  justify-content: space-between;
}

.header__logo {
  display        : flex;
  justify-content: center;
}

.header__logo img {
  height: 6rem;
}

.header__hero__main {
  padding: 2rem 0;
}

.hero__subtitle {
  text-transform: uppercase;
  color         : var(--color-amaranth-red);
}

.hero__title {
  padding: 1rem 0 3rem 0;
  color  : white;
}

.partners__top {
  display        : flex;
  justify-content: center;
  align-items    : center;
  margin-bottom  : 2rem;
  color          : var(--color-manatee);
}

.partners__top span:first-child,
.partners__top span:last-child {
  flex      : 1;
  border-top: 1px solid var(--color-manatee);
}

.partners__top span:nth-child(2) {
  text-transform: capitalize;
  padding       : 0 1rem;
}

.partners__logo {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

.partners__logo img {
  height: 2rem;
}

.header__realtors {
  flex            : 2;
  background-color: var(--color-space-cadet);
  display         : grid;
  justify-items   : center;
}

.realtors__title {
  align-self    : end;
  text-transform: uppercase;
  padding       : 2rem 0;
  color         : var(--color-imperial-red);
}

.realtors__list {
  align-self  : top;
  grid-row-gap: 4rem;
  display     : grid;
  align-self  : flex-start;
  width       : 100%;
  place-items : center;
}

.realtor__info {
  padding: 0.5rem;
}

.realtor {
  display    : flex;
  gap        : 2rem;
  align-items: center;
}

.realtor img {
  height       : 6.4rem;
  width        : 6.4rem;
  border-radius: 50%;
}

.realtor__name {
  color         : white;
  font-weight   : 600;
  padding-bottom: 0.5rem;
  text-transform: capitalize;
}

.realtor__house__sold {
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color         : var(--color-manatee);
}

.features {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap                  : 5rem;
}

.feature {
  display              : grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows   : min-content 1fr;
  grid-column-gap      : 2rem;
}

.feature__icon {
  grid-row    : 1/1;
  height      : 4.8rem;
  width       : 4.8rem;
  justify-self: start;
  fill        : var(--color-imperial-red);
}

.feature_title {
  align-self: center;
  color     : var(--color-space-cadet);
}

.feature__detail {
  grid-row    : 2/3;
  grid-column : 2/3;
  word-spacing: 0.5rem;
  font-style  : italic;
  line-height : 2.5rem;
  color       : var(--color-amaranth-red);
}

.story {
  display: flex;
  width  : 100%;
}

.story__photo {
  width                : 50%;
  display              : grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows   : repeat(6, 1fr);
  background           : linear-gradient(to right, #ef233b42, #ef233b31), url('./img/back.jpg') no-repeat;
}

.story__photo__1 {
  grid-column: 2/6;
  grid-row   : 2/6;
  width      : 100%;
  height     : auto;
  align-self : center;
}

.story__photo__2 {
  grid-column: 4/7;
  grid-row   : 3/7;
  width      : 115%;
  align-self : center;
  z-index    : 2;
}

.story__content {
  width           : 50%;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  background-color: var(--color-manatee);
  padding         : 6rem 8vw;
  gap             : min(3vw, 5rem);
}

.story__content__title {
  text-transform: uppercase;
  color         : var(--color-imperial-red);
}

.story__content__quotes {
  color: var(--color-space-cadet);
}

.story__content__info {
  color: var(--color-amaranth-red);
}

.houses {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(24rem, 1fr));
  gap: 6rem 8rem;
}

.house {
  width                : 100%;
  display              : grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows   : repeat(9, 1fr);
  background-color     : var(--color-manatee);
  max-width            : 46rem;
  place-self           : center;
}

.house__image {
  grid-column: 1/-1;
  grid-row   : 1/6;
  width      : 100%;
  height     : 100%;
  object-fit : cover;
}

.house__like {
  grid-column : 1/-1;
  grid-row    : 1/2;
  justify-self: end;
  align-self  : center;
  height      : 2.4rem;
  width       : 2.4rem;
  margin-right: 1rem;
  fill        : var(--color-amaranth-red);
}

.house__title {
  grid-column     : 1/-1;
  grid-row        : 6/7;
  background-color: var(--color-space-cadet);
  justify-self    : center;
  color           : white;
  display         : grid;
  place-items     : center;
  text-align      : center;
  width           : 80%;
  transform       : translateY(-50%);
}

.house__features {
  grid-column          : 1/-1;
  grid-row             : 6/10;
  display              : grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows   : 1fr 1fr;
  align-self           : center;
  grid-row-gap         : 3rem;
  padding              : 0 2rem 3rem 2rem;
}

.house__feature {
  display    : flex;
  align-items: flex-end;
}

.house__feature svg {
  width : 1.5rem;
  height: 1.5rem;
  margin: 0 1rem;
  fill  : var(--color-amaranth-red);
}

.house__feature p {
  color: var(--color-space-cadet);
}

.house__relator__btn {
  grid-column: 1/-1;
  grid-row   : 9/10;
  width      : 100%;
}

.gallery {
  display              : grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows   : repeat(7, 5vw);
  grid-gap             : 1.5rem;
  padding              : 1.5rem;
  background           : var(--color-manatee);
}

.gallery>img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

.gallery__img-1 {
  grid-column: 1/3;
  grid-row   : 1/3;
}

.gallery__img-2 {
  grid-column: 3/6;
  grid-row   : 1/4;
}

.gallery__img-3 {
  grid-column: 6/7;
  grid-row   : 1/3;
}

.gallery__img-4 {
  grid-column: 7/9;
  grid-row   : 1/3;
}

.gallery__img-5 {
  grid-column: 1/3;
  grid-row   : 3/6;
}

.gallery__img-6 {
  grid-column: 3/5;
  grid-row   : 4/6;
}

.gallery__img-7 {
  grid-column: 5/6;
  grid-row   : 4/5;
}

.gallery__img-8 {
  grid-column: 6/8;
  grid-row   : 3/5;
}

.gallery__img-9 {
  grid-column: 8/9;
  grid-row   : 3/6;
}

.gallery__img-10 {
  grid-column: 1/2;
  grid-row   : 6/8;
}

.gallery__img-11 {
  grid-column: 2/4;
  grid-row   : 6/8;
}

.gallery__img-12 {
  grid-column: 4/5;
  grid-row   : 6/8;
}

.gallery__img-13 {
  grid-column: 5/8;
  grid-row   : 5/8;
}

.gallery__img-14 {
  grid-column: 8/9;
  grid-row   : 6/8;
}

.footer {
  background-color: var(--color-space-cadet);
  padding         : 6rem 8vw;
  display         : grid;
  place-items     : center;
  gap             : 5rem;
}

.footer__links {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap                  : 2rem;
  align-items          : baseline;
  justify-items        : center;
  width                : 100%;
}

.footer__link {
  list-style    : none;
  text-transform: uppercase;
  text-align    : center;
  color         : var(--color-manatee);
  padding       : 1em 0.5em;
  transition    : 0.3s transform ease-in;
  cursor        : pointer;
}

.footer__link:hover {
  transform       : translateY(-2%);
  background-color: var(--color-imperial-red);
}

.copyright {
  color     : var(--color-manatee);
  width     : 70%;
  text-align: center;
}

@media only screen and (max-width: 62.5em) {
  body {
    flex-direction: column;
  }

  .navbar {
    height     : 4.5rem;
    width      : 100%;
    align-items: center;
  }

  .hamburger-icon {
    margin: 0;
    right : 1.5rem;
    gap   : 1rem;
  }

  .hamburger-icon span {
    min-width: 3rem;
  }

  .header {
    flex-direction: column;
  }

  .header__hero {
    min-height: calc(100vh - 4.5rem);
  }

  .realtors__list {
    place-items          : center;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    padding              : 0 5vw 5vh 5vw;
  }
}

@media only screen and (max-width: 50em) {
  .story {
    flex-direction: column-reverse;
  }

  .story__photo {
    width  : 100%;
    padding: 5vh 8vw;
  }

  .story__photo__1 {
    grid-column: 1/5;
    grid-row   : 1/-1;
  }

  .story__photo__2 {
    grid-column: 4/-1;
    grid-row   : 2/6;
    width      : 100%;
  }

  .story__content {
    width: 100%;
  }

  .gallery {
    grid-gap: 1rem;
    padding : 1rem;
  }
}

@media only screen and (max-width: 36em) {
  .partners__logo {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : 2rem;
  }

  .gallery {
    grid-gap: 0.5rem;
    padding : 0.5rem;
  }
}