@import url("../../css/style.css");

#about {
    background-color: var(--primary_light);
    border-radius: 16px;
    padding: 0.5rem;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 10%), 0px 8px 8px rgba(0, 0, 0, 10%);

}

.about_page {
    background-color: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 5%), 0px 2px 4px rgba(0, 0, 0, 5%);
}

.left_col img {
    background-color: var(--bg);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.line_separator {
    height: 1px;
    background-color: var(--black40);
}

.main_bttn {
    text-decoration: none;
    display: block;
    width: fit-content;
    box-shadow: inset 0 -8px 0 0 var(--accent);
    transition: all 0.5s;
}

.main_bttn:hover {
    box-shadow: inset 0 -24px 0 0 var(--accent);
}

/* MEDIA QUERIES */

@media (min-width: 992px) {
    h2 {
        margin-top: 0;
    }

    .about_page {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 2rem;
    }

    .left_col img {
        margin: 0;
        object-fit: contain;
        height: stretch;
    }

    .line_separator {
        width: 1px;
        height: 100%;
    }

    .right_col {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        justify-content: center;
    }

    .main_bttn {
        font-size: 1.17rem;
    }
}