/* ---------- Layout ---------- */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    align-items: stretch;
}

@media (max-width: 1200px) {
    .container {
        grid-template-columns: 1fr;
    }
}

/* ---------- Left Side ---------- */
.left-side {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: stretch;
}

.left-side__text {
    color: var(--bluegray);
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.left-side__image {
    height: 100%;
    display: flex;
}

.left-side__image img {
    flex: 1;
    object-fit: cover;
}

/* ---------- Right Side ---------- */
.right-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    height: 100%;
}

@media (max-width: 1200px) {
    .right-side {
        grid-template-columns: 1fr;
    }
}

/* ---------- Typography ---------- */
.homepage-title {
    font-size: 2.5em;
    font-weight: 900;
    margin-bottom: 1rem;
}

.left-side__header {
    font-size: 1.8em;
    font-weight: 900;
    margin-bottom: 2rem;
}

.left-side__main {
    font-size: 1em;
    margin-bottom: 3rem;
}

.tile__header {
    position: absolute;
    top: 2rem;
    font-size: 1em;
    font-weight: 900;
}

.tile__body {
    font-size: 1.3em;
}

/* ---------- Components ---------- */
.tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    position: relative;
    padding: 2rem;
    text-align: justify;
}

@media (min-width: 1201px) {
    .right-side .tile:first-child {
        grid-column: 1 / -1;
        padding: 4em;
    }
}

.tile span {
    position: absolute;
    font-size: 3em;
    font-weight: 900;
    bottom: 1rem;
    right: 1rem;
}

.tile:hover span {
    color: var(--darkred);
}

/* Tile Variants */
.tile--blue {background: var(--bluegray); color: #fff;}
.tile--gray {background: var(--gray); color: #fff;}
.tile--lightgray {background: var(--lightgray); color: var(--bluegray);}
.tile--lightred {  background: var(--lightred); color: #fff;}