.comp-grid {
    display: grid;
    grid-gap: 5rem;
    gap: 5rem;
    grid-template-areas: "sidebar main other";
    grid-template-columns: minmax(0, 25dvw) minmax(0, 2.5fr) minmax(0, 20dvw);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 3rem;
}

.section-info{
    margin-left: 1rem;
}

.workshop-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    padding-top: 1em;
    padding-right: 1em;
    box-sizing: border-box;
    gap: 3rem;
}

.workshop-table{
    table-layout: fixed;
    width: 100%;
}

.workshop-table tr{
    padding-top:10px;
    padding-bottom: 10px;
}

.comp-button-container{
    width: fit-content;
}

.other{
    margin-top: 4em;
}

.sticky-menu{
    position: sticky;
    top: 8em;
    height: fit-content;
}

.side-menu {
    right: 0px;
    justify-self: end;
}


.side-menu-list li {
    color: gray;
    text-decoration: none;
    margin-bottom: 3em
}

.side-menu-list a {
    color: gray;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5em;
}
.side-menu-list li {
    list-style: none
}
.main {
    display: inline-block;
}

li {
    width: fit-content;
}

.side-menu-list li a {
    padding-right: 0px;
    transition: 0.5s;
}

.side-menu-list li a::before {
    content: "\00ab";
    position:relative;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}



.side-menu-list li a:hover {
    padding-right: 25px;
}

.side-menu-list li:hover a::before {
    opacity: 1;
    right: 0px;
}



@media screen and (width > 1024px) {
    
}

@media screen and (width <=1250px) {
    
}

/* for tablet (landscape) */
@media screen and (width <=1024px) {
    .comp-grid {
        grid-template-areas: "sidebar main other";
        grid-template-columns: minmax(0, 4dvw) minmax(0, 2.5fr) minmax(0, 10dvw);
    }
    .other {
        margin-top: 2em;;
    }
    .side-menu-list {
        display: none;
    }
    .comp-button-container{
        position: absolute;
        top: 0;
        right: 50px;
        width: 200px;
    }
    /* .gradient-button {
        position: sticky;
        top: 0;
    } */
    .workshops h3 {
        font-size: 1.4em;
    }
}

/* for tablet (portrait) */
@media screen and (width <=850px) {
    .comp-grid {
            padding: 0;
            display: flex;
            flex-direction: column-reverse;
            gap: 1em;
        }
    
        .comp-button-container {
            /* position: fixed;
            top: 4rem;
            right: 0;
            left: -10px;
            width: 100dvw;
            height: 50px; */
            width: 100%;
            position: relative;
            box-sizing: content-box;
            right: 0;
        }
    
        .other {
            margin: 0;
        }
    
        .sticky-menu {
            top: 4rem;
        }
    
        .gradient-button {
            height: 70px;
            font-size: 1.2em;
            align-items: center;
        }
}

@media screen and (width <=750px) {
    
}

/* for mobile */
@media screen and (width <=600px) {
    .workshop-container {
        flex-direction: column;
    }
    .workshop-button {
        width: 100%;
        margin-bottom: 1em;
    }
}