@import url("../../../inati/_palette-ySWM8g-.css");

[data-controller~="inati--coloc-display--coloc-display-simple"] {
  display: flex;
  flex-direction: column;
  align-items: center;


  a.image-container:hover, a.image-container:active {
    img {
      transform: scale(1.1);
    }
  }

  div.image-container {
    position: relative;

    .soon {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(100%, 100%, 100%, 0.5);
      color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 4rem;
      font-weight: bold;
      text-transform: uppercase;
      z-index: 1;
    }
  }

  .image-container {
    position: relative;
    display: flex;
    justify-content: center; /* Centers the image horizontally */
    align-items: center;
    max-width: 95vw;
    margin: 2rem 0;
    overflow: hidden; /* Ensures the cropped image doesn't overflow the container */
    width: 350px; /* Set the width of the container */
    height: 220px; /* Set the height of the container */
    border-radius: 2rem; /* Rounded corners for the container */

    @media (min-width: 750px) {
      box-shadow: 0 .5rem .5rem rgba(0, 0, 0, 0.2);
    }

    @media (min-width: 1150px) {
      margin: .5rem 0;
    }

    img {
      transition: transform 0.5s ease;
      width: 380px; /* Make the image fill the width of the container */
      height: 250px; /* Make the image fill the height of the container */
      object-fit: cover; /* Crops the image while maintaining its aspect ratio */
      object-position: center; /* Centers the cropped portion of the image */
    }

    .city-name,
    .more {
      position: absolute;
      background-color: rgba(100%, 100%, 100%, 80%);
      padding: .25rem .5rem;
      border-radius: 1rem;
      z-index: 2;

      p {
        margin: 0;
        color: black;
        font-weight: bold;
      }
    }

    .city-name {
      left: .75rem;
      top: .75rem;
    }

    .more {
      right: .75rem;
      bottom: .75rem;
    }
  }
}