@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@media only screen and (min-width:1250px){
    .list-container .content{
        display: flex;
        flex-direction: row;
        justify-self: center;
        align-items: center;
        width: 100%;
        display: block;
        visibility: visible;
    }
    .mini-content{
        display: flex;
        flex-direction: row;
        justify-self: center;
        align-items: center;
        width: 100%;
        display: none;
        visibility: hidden;
    }
}

@media only screen and (min-width:535px) and (max-width:1250px){
    .list-container .content{
        display: flex;
        flex-direction: row;
        justify-self: center;
        align-items: center;
        width: 100%;
        display: block;
        visibility: visible;
    }
    .list-container .mini-content{
        display: flex;
        flex-direction: row;
        justify-self: center;
        align-items: center;
        width: 100%;
        display: none;
        visibility: hidden;
    }
}

@media only screen and (min-width:390px) and (max-width:535px){
    .list-container .content{
        display: flex;
        flex-direction: row;
        justify-self: center;
        align-items: center;
        width: 100%;
        display: none;
        visibility: hidden;
    }
    .list-container .mini-content{
        display: flex;
        flex-direction: row;
        justify-self: center;
        align-items: center;
        width: 100%;
        display: block;
        visibility: visible;
    }
}

@media only screen and (min-width:0px) and (max-width:390px){
    .list-container .content{
        display: flex;
        flex-direction: row;
        justify-self: center;
        align-items: center;
        width: 100%;
        display: none;
        visibility: hidden;
    }
    .list-container .mini-content{
        display: flex;
        flex-direction: row;
        justify-self: center;
        align-items: center;
        width: 100%;
        display: block;
        visibility: visible;
    }

    #long-portfolio-block{
        margin-bottom: 50px;
    }
}

.list-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 60px;
}

.portfolio{
    padding-top: 56px;
    background: black;
    width: 100%;
}