.continent-overview-page {
    padding: 90px 10px 50px;
}

.continent-overview-page h1 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--ws-main-color-1-dark);
    font-size: calc(1.3rem + 1.2vw);
    line-height: calc(1.4rem + 1.4vw);
    font-weight: bold;
}

.continent-overview-page p {
    margin-bottom: 15px;
    color: var(--ws-main-color-1-dark);
    font-size: .95rem;
    line-height: 1.35rem;
}

.continent-overview-page h1,
.continent-overview-page p {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.countries-tiles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    width: 96%;
    margin: 40px auto 50px;
    list-style-type: none;
}
.countries-tiles .tile {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
}
.countries-tiles .tile a {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
@property --country-tile-c1 { syntax: '<color>'; inherits: false; initial-value: #000; }
@property --country-tile-c2 { syntax: '<color>'; inherits: false; initial-value: #000; }
.countries-tiles .tile a:after {
    --country-tile-c1: rgba(50,50,50,.4);
    --country-tile-c2: rgba(50,50,50,.2);
    z-index: 1;
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient( to right, var(--country-tile-c1) 0%, var(--country-tile-c2) 100% );
    transition: --country-tile-c1 .25s ease, --country-tile-c2 .25s ease;
}
.countries-tiles .tile:hover a:after {
    --country-tile-c1: rgba(250,250,250,.5);
    --country-tile-c2: rgba(250,250,250,.3);
}
.countries-tiles .tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.countries-tiles .tile:hover img {
    transform: scale(1.1);
    transition: all .5s ease-in-out;
}
.countries-tiles .tile span {
    z-index: 2;
    position: absolute;
    bottom: 30px;
    left: 20px;
    width: calc(100% - 20px);
    color: white;
    font-size: 1.25rem;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.countries-tiles .tile:hover span {
    transform: scale(1.02);
    transition: all .5s ease-in-out;
}

@media only screen and (min-width: 500px) {
    .countries-tiles .tile {
        width: calc(50% - 2.5px);
        height: 230px;
    }
    .countries-tiles .tile.booking           { width: 100%; }
}
@media only screen and (min-width: 650px) {
    .countries-tiles .tile,
    .countries-tiles .tile.booking {
        width: calc(33% - 4px);
        height: 210px;
    }
}
@media only screen and (min-width: 768px) {
    .countries-tiles .tile.booking          { width: calc(29% - 4px); }
    .countries-tiles .tile.europe           { width: calc(34% - 4px); }
    .countries-tiles .tile.north-america    { width: calc(37% - 4px); }
    .countries-tiles .tile.central-america  { width: calc(26% - 4px); }
    .countries-tiles .tile.south-america    { width: calc(34% - 4px); }
    .countries-tiles .tile.asia             { width: calc(40% - 4px); }
    .countries-tiles .tile.africa           { width: calc(34% - 4px); }
    .countries-tiles .tile.oceania          { width: calc(38% - 4px); }
    .countries-tiles .tile.middle-east      { width: calc(28% - 4px); }
}
@media only screen and (min-width: 800px) {
    .continent-overview-page h1,
    .continent-overview-page p {
        width: 80%;
    }
    .continent-overview-page {
        padding: 130px 10px 50px;
    }
}
@media only screen and (min-width: 900px) {
    .countries-tiles .tile,
    .countries-tiles .tile.booking {
        width: calc(25% - 5px);
        height: 230px;
    }
    .countries-tiles .tile.booking          { width: calc(29% - 4px); }
    .countries-tiles .tile.europe           { width: calc(34% - 4px); }
    .countries-tiles .tile.north-america    { width: calc(37% - 4px); }
    .countries-tiles .tile.central-america  { width: calc(26% - 4px); }
    .countries-tiles .tile.south-america    { width: calc(34% - 4px); }
    .countries-tiles .tile.asia             { width: calc(40% - 4px); }
    .countries-tiles .tile.africa           { width: calc(34% - 4px); }
    .countries-tiles .tile.oceania          { width: calc(38% - 4px); }
    .countries-tiles .tile.middle-east      { width: calc(28% - 4px); }
}
@media only screen and (min-width: 1024px) {
    .continent-overview-page h1,
    .continent-overview-page p {
        width: 800px;
    }
    .countries-tiles {
        max-width: 1000px;
    }
}