.reference {
    display: grid;
    gap: 20px;
    padding: 50px 4%;

    /* background-color: var(--black_vanta); */
}

.ref_box {
    display: flex;
    align-items: flex-end;
    position: relative;
    height: 200px;

    border-radius: var(--radius-s);
    overflow: hidden;
}

.ref_bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.ref_logo {
    width: 100px;
    margin-bottom: 8px;
}

.ref_overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 20px;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.92) 0%,
        rgba(0,0,0,0.68) 50%,
        rgba(0,0,0,0.28) 100%
    );
}

.reference .font_section {
    text-align: center;
}

.reference a {
    color: var(--orange);
}

@media (min-width: 768px) {
    .reference {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .reference {
        grid-template-columns: 1fr 1fr 1fr;
        padding: 120px 4% 60px;
    }

    .reference .font_section {
        text-align: left;
    }
}

@media (min-width: 1200px) {
    /* skrytý text */
    .ref_overlay p {
        opacity: 0;
        transform: translateY(20px);
        max-height: 0;
        overflow: hidden;

        transition: 0.5s ease;
    }

    /* hover efekt */
    .ref_box:hover .ref_overlay p {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }

    .ref_box:hover .ref_bg {
        transform: scale(1.05);
        transition: 1s ease;
    }
}