section.main {
        max-width: var(--max-width);
        width: 90%;
        display: flex;
        flex-direction: column;
        margin-inline: auto;
        padding-block: 40px;
        /*! margin-block: 20px 40px; */
  }

  section.main header {
    /*! font-family: sans-serif; */
    letter-spacing: 1.5px;
  /*! margin-bottom: 15px; */
      text-align: center;
    /*! padding-block-end: 40px; */
  }

.location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px 20px;
    justify-content: center;
    padding-block: 40px;
}

/* Style for each location item */
.location {
    cursor: pointer;
}

.location div {
    height: 320px;
    margin-bottom: 5px;
    overflow: hidden;
}

.location div img {
    height: 100%;
    object-fit: cover;
    transition: transform 200ms linear;
}

.location:hover img {
    transform: scale(1.2)
}

.location-name {
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--headings-color);
}

.location:hover {
    color: var(--headings-color);
}

.location:hover .location-name {
    color: var(--main-theme-color);
}