header{
    border-bottom: 1px solid var(--gray);
}

main{        
    border-bottom: 1px solid var(--gray);    
    justify-content: center;    
}

.main-grid{    
    display: grid;
    grid-template-columns: repeat(7,1fr);    
    row-gap: 12px;
    column-gap: 12px;
    width: 100%;
    max-width: 1200px;
}

.title-block{
    grid-row: 2;
    grid-column: 2/5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title-block .title{
    font-size: 4rem;
    font-weight: 700;    
}

.title-block .sub{
    font-size: 2.45rem;   
    white-space: nowrap;
}

.my-block.enter{
    height: 100%;
}

.enter a{
    text-decoration: none;
    width: 100%;
}

.enter div{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1rem;    
}

.my-block{
    background-size: cover;
    display: flex;
}

.my-block img{
    transition: all 1.5s;
}

.my-block.hidden img{
    opacity: 50%;
}

.mobile-only{
    display: none;
}

@media screen and (max-width: 769px){
    .mobile-only{
        display: flex;
    }
    .main-grid{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .title-block{        
        grid-column: 1/4;
        height: calc(20vh - 20px);        
    }
    .my-block{
        max-width: calc(20vh - 20px);
    }
    header, main{
        border-bottom: none;
    }
    .title-block .title{
        font-size: 10vw;
        font-weight: 700;    
    }
    
    .title-block .sub{
        font-size: 6.1vw;
    }
    .enter div{
        font-size: 1rem;
    }
}