@media(max-width: 1100px){
    *{
        --fs-24: 22px;
        --fs-40: 28px;
    }
    .caption{
        padding-top: 10px;
        padding-bottom: 40px;
    }
    .title__main{
        font-size: 65px;
        /* margin-bottom: 30px; */
        padding-bottom: 30px;
    }
    .caption__results{
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: none;
    }
    .caption__box{
        flex-direction: column-reverse;
        align-items: center;
    }
    .caption__result{
        width: 100%;
        margin: 20px;
    }
    .caption__image{
        padding-top: 0;
        display: flex;
    }
    .caption__contact{
        display: none;
    }
    .caption__contact.mobile{
        display: block;
        margin-left: 20px;
    }
    .caption__slider{
        transform: none;
    }
    .main__image{
        height: 100%;
        object-fit: cover;
        object-position: left top;
    }
    .caption__slider{
        bottom: 15px;
        height: 85px;
        padding: 15px 0;
    }
}
@media(max-width: 810px) {
    .main__image{
        height: auto;
        width: 380px;
    }
}
@media(max-width: 768px) {
    .slider__controls > button:hover > img {
        filter: none;
    }
    .about__boxes{
        grid-template: repeat(3, 1fr) / 1fr;
    }
    .about__box:first-of-type{
        border-radius: 20px 20px 0 0;
        border-right: 1px solid var(--color-white);
        border-bottom: none;
    }
    .about__box:last-of-type{
        border-radius: 0 0 20px 20px;
        border-left: 1px solid var(--color-white);
        border-top: none;
    }
    .title{
        font-size: 40px;
    }
    *{
        --fs-24: 20px;
        --fs-16: 14px;
        --fs-19: 16px;
    }
    .header{
        position: relative;
        z-index: 12;
    }
    .header__button{
        display: block;
    }
    .header__menu{
        display: none;
        position: absolute;
        top: -25px;
        right: 0;
        max-width: 300px;
        width: 100%;
        padding: 30px 20px;
        background-color: var(--color-black);
        z-index: 12;
    }
    .header__menu-list > .header__button{
        margin-bottom: 30px;
    }
    .header__menu-list{
        padding-left: 0;
        flex-direction: column;
        align-items: center;
    }
    .header__menu-item{
        margin-bottom: 10px;
        margin-left: 0;
    }
    .contactBtn{
        margin: 0 auto;
    }
    .caption__image{
        flex-direction: column;
    }
    .main__image{
        width: 100%;
        object-position: center;
        height: 422px;
    }
    .caption__contact.mobile{
        margin-left: 0;
        margin-top: 15px;
    }
    .caption__image-description{
        bottom: 20px;
    }
    .title__main{
        max-width: 670px;
        
    }
    .caption__contact-text{
        text-align: center;
    }
    .caption__contact{
        max-width: 480px;
    }
    .skills__description{
        white-space: wrap;
    }
    .skills__description > br{
        display: block;
    }
    .about{
        padding-bottom: 40px;
    }
    .title__main{
        font-size: 40px;
    }
    .skills__box > img{
        filter: none;
    }
    .slider__item-header{
        display: grid;
        grid-template: 1fr / 1fr;
    }
    .slider__item-name{
        max-width: none;
        border-right: none;
        padding: 15px;
    }
    .slider__item-tag{
        padding: 10px;
        font-size: 13px;
    }
    .slider__item-controls{
        display: none;
    }
    .slider__item-tags{
        padding: 15px;
    }
    .slider__item-wrapper{
        width: 100%;
        overflow: auto;
        gap: 10px;
    }
    .header__menu-list{
        max-width: none;
    }
    .skills__box{
        padding: 15px;
    }
    .slider__controls{
        top: 140px;
        right: 10px;
    }
    .slider{
        margin-top: 20px;
    }
    .slider__item-hidden{
        display: block;
        background-color: transparent;
        opacity: 1;
        padding: 18px 10px;
    }
    .slider__item-link{
        display: block;
        width: fit-content;
        padding: 10px;
    }
    .slider__item-description{
        padding: 20px 10px;
    }
    .footer{
        padding-bottom: 40px;
    }
    .caption__slider{
        bottom: 0px;
        transform: rotate(0deg);
    }
    .blog__controls-row{
        grid-template: auto 1fr / 1fr;
    }
    .blog__controls-subtitle{
        margin: 20px 0 10px;
    }
    .blog__controls{
        margin-bottom: 40px;
    }
    .card__link{
        font-size: 18px;
    }
    .single__inner{
        flex-direction: column;
    }
    .single__description, .single__inner{
        gap: 20px;
    }
    .single__description-title{
        font-size: 40px;
    }
    .single__description-tag{
        font-size: 10px;
        padding: 8px 20px;
    }
    .single__description-text{
        font-size: 14px;
    }
    .single__link > span{
        font-size: 14px;
    }
    .caption__slider-item{
        width: 210px;
    }
}
@media(max-width: 475px){
    .single__links-links{
        flex-direction: column;
        gap: 15px;
    }
    .single__link{
        width: 100%;
    }
    .single__links-image{
        max-width: 390px;
        width: 100%;
    }
    .blog__controls-tag{
        font-size: 10px;
        padding: 8px 20px;
    }
    .cards__inner{
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
    .header__menu{
        max-width: none;
        border-bottom: 1px solid var(--color-white);
    }
    .about__box {
        padding: 15px;
    }
    .caption__image{
        margin: 0;
        width: 100%;
    }
    .caption__contact-button{
        width: 100%;
    }
    .caption__image-inner{
        width: 100%;
    }
    .caption__results{
        flex-direction: column;
    }
    .caption__result{
        margin: 0;
        margin-top: 20px;
    }
    
    .caption__contact-button{
        margin: 20px auto 0;
    }
    @keyframes loop {
        0% {
            transform: translateX(0);
        }
        25% {
            transform: translateX(-30%);
        }
        50% {
            transform: translateX(0);
        }
        75% {
            transform: translateX(30%);
        }
        100% {
            transform: translateX(0);
        }
    }
    .caption__image-description{
        max-width: 100%;
        padding: 0 20px;
    }
}