.gl-hero {
    display: grid;
    grid-template-rows: minmax(600px, auto);
    grid-template-columns: 1fr;

    grid-row-start: 1;
    grid-row-end: span 1;
    grid-column-start: 1;
    grid-column-end: -1;

    background-color: var(--gl-hero-bg);
    background-image: url("../img/pexels-ron-lach-7859350.jpg");
    background-size: cover;
    background-position: center;

    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);

    z-index: 20;
}

.gl-hero::before {
    content: "";

    grid-row-start: 1;
    grid-row-end: -1;
    grid-column-start: 1;
    grid-column-end: -1;

    background: linear-gradient(90deg, var(--gl-hero-dimmer-1) 0%, var(--gl-hero-dimmer-2) 100%);

    z-index: 5;
}

#gl-hero-title {
    grid-row-start: 1;
    grid-row-end: -1;
    grid-column-start: 1;
    grid-column-end: -1;

    justify-self: center;
    align-self: end;

    padding: 10rem 2rem;
    font-size: 2rem;
    text-align: center;
    color: var(--gl-hero-title);

    z-index: 10;
}

/* WIDTH BREAKPOINTS ------------------------------------------------------------------------------------------------ */
/* sm */
@media (min-width: 640px) {
}

/* md */
@media (min-width: 768px) {
}

/* lg */
@media (min-width: 1024px) {
}

/* xl */
@media (min-width: 1280px) {
}

/* 2xl */
@media (min-width: 1536px) {
    #gl-hero-title {
        padding: 3rem 2rem;
        font-size: 3.5rem;
        text-align: center;
        color: var(--gl-hero-title);

        z-index: 10;
    }
}

/* 3xl */
@media (min-width: 1800px) {
}

/* 4xl */
@media (min-width: 2200px) {
}

/* HEIGHT BREAKPOINTS ----------------------------------------------------------------------------------------------- */
/* Average height */
@media (min-height: 700px) {
}

/* Tall screens */
@media (min-height: 800px) {
}

/* Very tall screens */
@media (min-height: 900px) {
}

/* Extra tall */
@media (min-height: 1000px) {
}

/* Ultra tall */
@media (min-height: 1200px) {
}