@import "/css/style_main.css";

.works-container {
    width: 100%;
    height: 65vh;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

section {
    background-image: radial-gradient(rgba(var(--gradient-color-dark), 0.1), rgba(var(--gradient-color-light), 0.8));
    box-shadow: 2px 2px 10px black;
    border-radius: 2rem;
    
    margin: 2rem auto;
    
    h1 {
        font-size: 4rem;
    }
    
    h2 {
        font-size: 2.5rem;
    }
}

.section__title {
    border-radius: 2rem 2rem 0 0;
    
    background-image: linear-gradient(90deg, rgb(0, 0, 0) 0%, var(--primary-border-color) 50%, rgb(0, 0, 0) 100%);
    color: var(--secondary-text-color);
    
    width: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    hr {
        flex-grow: 0.4;
        border-color: var(--secondary-text-color);
    }
}

.section__content {
    padding: 2rem;
}

.section__col-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    
    padding: 3rem;
    gap: 2rem;
    
    width: 80%;
    margin: 2rem auto;
    
    text-align: center;
    
    border-radius: 2rem;
    background: linear-gradient(to right, rgba(var(--gradient-color-dark), 0.5), rgba(0, 0, 0, 0));
    
    img {
        border-radius: 1rem;
        box-shadow: 2px 2px 5px black;
        height: 20rem;
    }
}

.section__gallery {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 2rem;
    
    img {
        height: 20rem;
        transition: transform 0.2s ease-out;
        box-shadow: 2px 2px 5px black;
    }
    
    img:hover {
        transition: transform 0.2s ease-out;
        transform: scale(105%) rotate(1deg);
    }
}