body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100dvh;

    background-image: url('/assets/img/IMG_5330.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.home-layout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
}
.columns {
    display: flex;
    width: 100%;
    max-width: 1350px;
    padding: 2.5rem;
    gap: 2.5rem;
    margin: 0;
    background-color: white;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.left-column {
    display: flex;
    flex-direction: column;
    width: calc(50% - 2.5rem);
    padding: 0;
    margin: 0;
}
.right-column {
    display: flex;
    flex-direction: column;
    width: calc(50% - 2.5rem);
    padding: 0;
    margin: 0;
}
.left-column-top {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}
.left-column-middle {
    min-height: 400px;
    padding: 0;
    margin: 0;
}
.left-column-bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
    gap: 2.5rem;
    padding: 0;
    margin: 0;
    p {
        margin-left: 2.5rem;
        padding: 0;
    }
}
.right-column-top {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    gap: 1.25rem;
    padding: 0;
    margin: 0;
}
.right-column-middle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    gap: 0;

    p {
        padding: 0;
        margin: 0;
        font-size: large;
        font-family: baskerville, serif;
        font-weight: 600;
    }
}
.right-column-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    min-height: 500px;
    gap: 1.25rem;
    padding: 0;
    margin: 0;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1350px;
    background-color: white;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

@media (max-width: 890px) {
    body {
        height: auto;
        padding: 1rem;
        background-size: contain;
    }

    .home-layout {
        padding: 0;
    }

    .columns {
        flex-direction: column;
        padding: 1.5rem;
        gap: 1.5rem;
        max-width: 100%;
        border-radius: 12px;
    }

    .left-column,
    .right-column {
        width: 100%;
        padding: 0;
        gap: 1.5rem;
    }

    .left-column-top {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .left-column-top h1 {
    font-size: 34px !important;
}
    .left-column-middle {
        min-height: auto;
        align-items: center;
    }

    .left-column-middle img {
        width: 100%;
        margin: 1rem 0;
        height: auto;
        transform: none !important;
    }

    .left-column-bottom {
        gap: 1rem;
        transform: none !important;
    }

    .left-column-bottom p {
        margin-left: 0;
        font-size: 16px;
    }

    .left-column-bottom video {
        width: 100%;
        height: auto;
    }

    .right-column-top {
        flex-direction: row;
        gap: 1rem;
        transform: none !important;
    }

    .right-column-top video,
    .right-column-top img {
        width: 100%;
        height: auto;
        transform: none !important;
    }

    .right-column-middle {
        gap: 0.5rem;
        padding: 1rem 0;
    }

    .right-column-middle p {
        font-size: medium;
        text-align: center;
    }

    .right-column-bottom {
        flex-direction: row;
        gap: 1rem;
        min-height: auto;
    }

    .right-column-bottom img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    footer {
        flex-direction: column;
        padding: 1.5rem 1rem;
        gap: 0.5rem;
        border-radius: 12px;
    }

    .footer-text {
        text-align: center;
        font-size: 14px;
		text-decoration: none;
    }
}