main {
  gap: 0;
  padding-bottom: 2.5rem;
}

main #images {
  height: 30rem;
  overflow: hidden;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

main #images button {
  position: absolute;
  top: 50%;
  width: 5rem;
  aspect-ratio: 1;
  z-index: 99;
  background-color: #ffffff50;
  border-radius: 50%;
  border: 0;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  filter: invert(0.9);
  cursor: pointer;
  backdrop-filter: blur(2px) invert(0.9);
  transition: all 0.1s;
}

main #images button:nth-child(1) {
  left: calc(50% - 500px);
  background-image: url(../assets/arrowLeft.png);
  transform: translateY(-50%);

  &:active {
    scale: 0.9;
    transform: translateY(-55%);
  }
}

main #images button:nth-child(2) {
  right: calc(50% - 500px);
  background-image: url(../assets/arrowLeft.png);
  rotate: 180deg;
  transform: translateY(50%);

  &:active {
    scale: 0.9;
    transform: translateY(55%);
  }
}

main #images .img-content {
  height: 100% !important;
  transition: all 0.3s;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  transform: translateX(-50%);
  width: 100%;
  transition: all .3s;
  background-position: center center;
}

main #images .img-content:not(.active) {
  opacity: 0;
}

main #images #counter {
  position: absolute;
  left: 50%;
  bottom: 0;
  background-color: #33333350;
  transform: translateX(-50%);
  backdrop-filter: blur(2px);
  padding: 0.25rem 0.5rem;
  color: #eee;
  z-index: 99;
}

main #images .bg {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.3s;
  width: 100%;
  filter: blur(100px);
  background-size: cover;
  background-position: center center;
}

main .main-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

main .main-info .container {
  max-width: 800px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-block: 3rem;
  border-bottom: 1px solid #33333350;
  animation: info 1s linear forwards;
  animation-delay: calc(var(--i) * .7s + .3s);
  opacity: 0;

  &:last-child {
    border: 0;
  }
}

@keyframes info {
  to {
    opacity: 1;
  }
}

main .main-info .container h2 {
  margin-bottom: 1rem;
  color: #333;
  font-weight: 600;
}

main .main-info .container .descricao {
  width: 60%;
}

main .main-info .container .pontos {
  width: 30%;
}

main .main-info .container .pontos ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin-left: 2rem;
  gap: 1rem;
}

main .main-info .container .pontos ul li {
  font-size: 1.2rem;
  color: #333;
  width: max-content;
  font-weight: 500;
}

main .main-info .container .pontos ul li {
  position: relative;
  left: 1.5rem;
}

main .main-info .container .pontos ul li::before {
  content: "";
  position: absolute;
  z-index: 99;
  top: 50%;
  left: -1.5rem;
  transform: translateY(-50%);
  width: 1rem;
  aspect-ratio: 1;
}

main .main-info .container .pontos ul li.mobilia::before {
  background-color: #3498db;
  mask: url(../assets/mobilia.png);
  mask-size: contain;
}

main .main-info .container .pontos ul li.mar::before {
  background-color: #3498db;
  mask: url(../assets/mar.png);
  mask-size: contain;
}

main .main-info .container .pontos ul li.local::before {
  background-color: #3498db;
  mask: url(../assets/local.png);
  mask-size: contain;
}

main .main-info .container .pontos ul li.construtora::before {
  background-color: #3498db;
  mask: url(../assets/construtora.png);
  mask-size: contain;
}

main .main-info .container .pontos ul li.vaga::before {
  background-color: #3498db;
  mask: url(../assets/carro.png);
  mask-size: contain;
}

main .main-info .container .pontos ul li.predio::before {
  background-color: #3498db;
  mask: url(../assets/predio.png);
  mask-size: contain;
}

main .main-info .container .pontos ul li.metros::before {
  background-color: #3498db;
  mask: url(../assets/metragem.png);
  mask-size: contain;
}

main .main-info h1 {
  color: #333;
}

main .main-info h1 span {
  color: #3498db;
  font-size: 1.5rem;
  font-weight: 500;
}

main .main-info .price {
  display: flex;
  flex-direction: column;
  position: relative;
  width: max-content;
  justify-content: start;
  align-items: start;
  gap: .5rem;
  text-wrap: nowrap;
  height: fit-content;
}

main .main-info .price .aluguel {
  font-size: 1.5rem;
  font-weight: 500;
  background-image: linear-gradient(to top, #2a3f6d50, transparent 50%);
  color: #333;
}

main .main-info .price .taxas {
  text-align: start;
}

@media screen and (width <=900px) {
  main #images {
    height: 70vw;
    max-height: 450px;
  }

  main #images button {
    width: 3.5rem;
  }

  main #images button:nth-child(1) {
    left: 1rem;
  }

  main #images button:nth-child(2) {
    right: 1rem;
  }

  main .main-info h1 {
    width: 100%;
    font-size: 1.5rem;
  }

  main .main-info h1 span {
    font-size: 1.3rem;
  }

  main .main-info {
    padding-inline: 2rem;
  }

  main .main-info .container .descricao {
    width: 100%;
  }

  main .main-info .container .pontos {
    width: 100%;
    padding-top: 1rem;
  }

  main .main-info .container .pontos ul li {
    width: -webkit-max-content;
    width: max-content;
    text-wrap: nowrap;
    list-style: none;
    white-space: nowrap;
  }

  main .main-info .container:first-child {
    padding-top: 0;
    gap: 2rem;
  }

  main .main-info .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }

  main .main-info .container .price {
    justify-content: end;
    width: 100%;
    align-items: start;
  }

  main .main-info .container .price .aluguel {
    font-size: 1.3rem;
  }

  main .main-info .price .taxas {
    left: 0;
  }
}