body {
    background-color: var(--secondary2);
}

h1 {
    font-family: gelica, serif;
    text-align: center;
    font-size: max(8vmin, 3rem);
    color: var(--text2);
    margin: 1em 0 0.5em;
}

section.properties {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 5vmin 5vw;
    gap: max(5vmin, 30px);
}

section.properties .card {
    display: flex;
    flex-direction: column;
    background-position:
        0 0,
        center 0;
    background-size:
        auto auto,
        /* 64 vmin is calculated from 40vmin (linear gradient above) multiplied by 1.6, the aspect ratio of the image*/
        max(100%, 64vmin) auto;
    border-radius: max(4vmin, 30px);
    overflow: hidden;
    width: clamp(400px, 60vmin, 90%);
    outline: 2px solid var(--secondary1);
    outline-offset: max(1vmin, 8px);
    padding: max(36vmin, 300px) 1.3rem 1.3rem;
    cursor: pointer;
    transform: scale(0.98);
    transition: 0.5s;
    text-decoration: none;
}

section.properties .card.the-boardwalk {
    background-image:
        linear-gradient(
            to bottom,
            transparent max(25vmin, 250px),
            color-mix(in srgb, var(--text2) 80%, transparent) max(35vmin, 300px),
            var(--text2) max(40vmin, 350px)
        ),
        url("../assets/images/properties/the-boardwalk/lakeside/lakeside-4.webp");
    background-size:
        auto auto,
        /* 60 vmin is calculated from 40vmin (linear gradient above) multiplied by the aspect ratio of the image*/
        /* 600 px is calculated from 300px (linear gradient above) multiplied by the aspect ratio of the image*/
        max(100%, max(60vmin, 600px)) auto;
}

section.properties .card.sunset-escape {
    background-image:
        linear-gradient(
            to bottom,
            transparent max(25vmin, 250px),
            color-mix(in srgb, var(--text2) 80%, transparent) max(35vmin, 300px),
            var(--text2) max(40vmin, 350px)
        ),
        url("../assets/images/properties/sunset-escape/lakeside/lakeside-2.webp");
    background-size:
        auto auto,
        /* 30 vmin is calculated from 40vmin (linear gradient above) multiplied by the aspect ratio of the image*/
        max(100%, max(30vmin, 367px)) auto;
}

section.properties .card.quiet-cove {
    background-image:
        linear-gradient(
            to bottom,
            transparent max(25vmin, 250px),
            color-mix(in srgb, var(--text2) 80%, transparent) max(35vmin, 300px),
            var(--text2) max(40vmin, 350px)
        ),
        url("../assets/images/properties/quiet-cove/lakeside/lakeside-4.webp");
    background-size:
        auto auto,
        /* 60 vmin is calculated from 40vmin (linear gradient above) multiplied by the aspect ratio of the image*/
        /* 600 px is calculated from 300px (linear gradient above) multiplied by the aspect ratio of the image*/
        max(100%, max(60vmin, 600px)) auto;
}

section.properties .card.harbor-house {
    background-image:
        linear-gradient(
            to bottom,
            transparent max(25vmin, 250px),
            color-mix(in srgb, var(--text2) 80%, transparent) max(35vmin, 300px),
            var(--text2) max(40vmin, 350px)
        ),
        url("../assets/images/properties/harbor-house/lakeside/lakeside-2.webp");
    background-size:
        auto auto,
        /* 60 vmin is calculated from 40vmin (linear gradient above) multiplied by the aspect ratio of the image*/
        /* 600 px is calculated from 300px (linear gradient above) multiplied by the aspect ratio of the image*/
        max(100%, max(60vmin, 600px)) auto;
}

section.properties .card:hover {
    outline-color: var(--primary1);
    transform: scale(1);
}

section.properties .card h2 {
    font-size: max(6vmin, 2.25rem);
    font-family: gelica, serif;
    color: var(--primary1);
}

section.properties .card p {
    font-size: max(2vmin, 1rem);
    color: var(--secondary2);
}

section.properties .card ul.amenities {
    font-size: max(2vmin, 1rem);
    list-style: none;
    padding: 1em 0 0;
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(22vmin, 150px), 1fr));
    gap: 0.25em 0.8em;
    align-items: center;
}

section.properties .card ul.amenities li {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.15em 0;
    font-weight: 500;
    color: var(--secondary2);
    border: none;
    background: transparent;
}

section.properties .card ul.amenities li::before {
    color: var(--primary1);
    width: 1.4em;
    height: 1.4em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 1.1em;
    line-height: 1;
    font-family: "Material Symbols Outlined";
    font-variation-settings:
        "FILL" 0,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
}