.apartament-5-two-column-image{
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    border-radius: 16px;
}


.apartament-5-three-column-image
{
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
    border-radius: 16px;
}


.apartments-block
{
    font-family: "Poppins", sans-serif;
    color: #FFF;
}

.apartments-block h4
{
    color: #FFF;
    font-weight: 500;
    font-size: 24px;
    line-height: 124%;
    margin-bottom: 0.3em;
}

.apartament-5-services
{
    display: flex;
    width: 100%;
    /* linea superior */
    border-top: 1px solid #FFF;

    justify-content: space-between;
    
    align-items: flex-start;
    padding-bottom: 1px;

}

.apartament-5-services svg
{
    width: 24px;
    height: 24px;
    fill: #FFF;
    
}

.apartament-5-column 
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0 2rem 3rem;
}

.apartament-5-category
{
    position: absolute;
    top: 2rem;
    left: 1.5rem;
    background-color: #05ADBF;
    color: #FFFFFF;
    border-radius: 14px;

    font-weight: 300;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0%;
    vertical-align: middle;

    padding: 0.65rem 1.5rem;
}

.apartament-5-services-icons
{
    margin-top: 12px;
    display: flex;
    gap: 12px;
}

a.apartament-5-link
{
    color: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    padding: 0.5rem 1rem;
    display: inline-block;

    font-weight: 300;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0%;
}

a.apartament-5-link:hover
{    
    color: #000 !important;
    background-color: #FFFFFF;
}

.apartament-column-text-container
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.apartament-column-text-container p
{
    font-weight: 300;
    font-size: 14px;
    line-height: 150%;
    text-align: right;
    vertical-align: middle;
    padding-bottom: 1rem;
}


.apartament-5-services {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(20px); /* desplazado hacia abajo inicialmente */
  transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

.apartament-5-column.show-services .apartament-5-services {
  max-height: 500px; /* ajusta según contenido esperado */
  opacity: 1;
  transform: translateY(0); /* se desplaza hacia arriba */
}




.apartament-5-column {
  position: relative; /* necesario para que ::before se posicione respecto a este */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size 0.5s ease;
  overflow: hidden;
}

.apartament-5-column::before {
  content: '';
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: inherit; /* hereda la imagen de fondo del padre */
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;

  filter: brightness(1);
  transition: filter 0.5s ease, transform 0.5s ease;
  z-index: 0; /* detrás del contenido */
}


.apartament-5-column:hover::before {
  filter: brightness(0.6); /* oscurece la imagen */
  transform: scale(1.1); /* zoom suave */
}

.apartament-5-column > * {
  
  z-index: 1;
}

.hide-apartments-block
{
    display: none;
}


@media only screen and (max-width : 1023px) 
{
    /* Styles for mobile */
    .apartament-5-column
    {
        aspect-ratio: 370/379;
        margin-bottom: 30px;
    }

    
}


@media only screen and (min-width : 1024px) and (max-width : 1380px) 
{
    .apartament-5-three-columns{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-bottom: 15px;
    }

    .apartament-5-three-column
    {
        overflow: hidden;
    }

    .apartament-5-two-columns{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 15px;
    }

    .apartament-5-two-column-image{
        aspect-ratio: 624/341;
    }


    .apartament-5-three-column-image
    {
        aspect-ratio: 296/341;        
    }

}


@media only screen and (min-width : 1381px) 
{
    .apartament-5-three-columns{
        display: grid;
        grid-template-columns: 1fr 2.11fr 1fr; /* Centro más ancho */
        gap: 30px;
        margin-bottom: 30px;
    }

    .apartament-5-two-columns{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin-bottom: 30px;
    }

    .apartament-5-two-column-image{
        aspect-ratio: 624/341;
    }


    .column-1 .apartament-5-three-column-image, .column-3 .apartament-5-three-column-image
    {
        aspect-ratio: 296/341;        
    }

    .column-2 .apartament-5-three-column-image
    {
        aspect-ratio: 624/341;        
    }


}