.gl-labbit-definition {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;

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

    background-color: var(--gl-dot-bg-green);

    background-image:
            repeating-linear-gradient(90deg, #22c56b 0px, #22c56b 1px, transparent 0, transparent 100%),
            repeating-linear-gradient(0deg, #16a356 0px, #16a356 1px, transparent 0, transparent 100%);
    background-position: center center, center center;
    background-size: 20px 20px, 20px 20px;
    background-repeat: repeat, repeat;
}

.gl-labbit-definition::before {
    content: "";

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

    background-image: url("../img/labbit.png");
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.1;
}

.gl-labbit-definition > div {
    grid-row-start: 1;
    grid-row-end: -1;
    grid-column-start: 1;
    grid-column-end: -1;

    padding: 4rem 32px;

    z-index: 20;
}

.gl-labbit-definition > div > h4 {
    font-family: "Inter", sans-serif;
    line-height: 1.7rem;

    margin: 4rem 0;
}

/* 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-labbit-definition::before {
        background-position: right;
    }

    .gl-labbit-definition > div {
        padding: 4rem 16rem;
    }
}

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

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