/* Locations: archive cards, the support band, and the single-location detail grid with related links. */
.ocf-location-card {
    margin-top: var(--ocf-grid-gap);
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--neptune-bg-alt);
}

.ocf-location-card>img {
    width: 100%;
    height: var(--ocf-location-card-image-height);
    object-fit: cover;
}

.ocf-location-card>div {
    padding: calc(var(--ocf-grid-gap) * 1.25);
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: calc(var(--ocf-grid-gap) * 0.75);
}

.ocf-location-support {
    display: flex;
    align-items: start;
    gap: calc(var(--ocf-grid-gap) * 2);
    margin-top: var(--ocf-grid-gap);
}

.ocf-location-support p {
    margin-top: calc(var(--ocf-grid-gap) * 0.5);
}

.ocf-location-support>a {
    flex-shrink: 0;
}

.ocf-location-detail-grid {
    display: grid;
    grid-template-columns: 504fr 640fr;
    gap: calc(var(--ocf-grid-gap) * 2.25);
}

.ocf-location-detail-grid h3 {
    margin: calc(var(--ocf-grid-gap) * 0.875) 0 calc(var(--ocf-grid-gap) * 0.5);
}

.ocf-location-detail-grid .ocf-text-link {
    display: inline-block;
    margin-top: calc(var(--ocf-grid-gap) * 0.875);
}

.ocf-location-detail-grid img {
    width: 100%;
    height: var(--ocf-location-detail-image-height);
    object-fit: cover;
}

.ocf-location-detail-grid figcaption {
    margin-top: calc(var(--ocf-grid-gap) * 0.5);
    font-size: var(--ocf-font-small-size);
}

.ocf-related-links {
    min-width: var(--ocf-location-links-width);
    display: flex;
    flex-direction: column;
    gap: calc(var(--ocf-grid-gap) * 0.75);
}

@media (max-width: 767px) {
    .ocf-location-card,
    .ocf-location-detail-grid {
        grid-template-columns: 1fr;
        gap: var(--ocf-grid-gap);
    }

    .ocf-location-card>div {
        padding: calc(var(--ocf-grid-gap) * 0.75);
    }

    .ocf-location-support {
        flex-direction: column;
        gap: calc(var(--ocf-grid-gap) * 0.75);
    }

    .ocf-location-detail-grid img {
        height: var(--ocf-location-image-height-mobile);
    }
}