.col {
    height: 90vh;
    display: flex;
}

.col1 {
    width: 25vw;
    display: flex;
}

.col3 {
    display: flex;
    justify-content: flex-end;
    width: 15vw;
}

/* Ekranın geri kalanı */
.frame {
    display: flex;
    width: 100vw;
    height: 90vh;
    align-items: center;
    padding: 0;
    margin: 0;
}

@media screen and (max-width: 1280px)  and (orientation: landscape) {

}

@media screen and (max-width: 1280px)  and (orientation: portrait) {
.col {
        width: 100vw;
    }
    .col1 {
        align-items: flex-end;
        height: 19vh;
        max-width: 100vw;
        overflow-x: hidden;
        order: 3;
    }
    
    .col3 {
        justify-content: center;
        height: 16vh;
        order: 2;
    }
    
    /* Ekranın geri kalanı */
    .frame {
        width: 100vw;
        height: 90vh;
        flex-direction: column;
        justify-content: start;
    }
}

@media screen and (max-width: 767px)  and (orientation: landscape) {
   
}

@media screen and (max-width: 767px)  and (orientation: portrait) {
    .col {
        width: 100vw;
    }
    .col1 {
        align-items: flex-end;
        height: 19vh;
        max-width: 100vw;
        overflow-x: hidden;
        order: 3;
    }
    
    .col3 {
        justify-content: center;
        height: 16vh;
        order: 2;
    }
    
    /* Ekranın geri kalanı */
    .frame {
        width: 100vw;
        height: 90vh;
        flex-direction: column;
        justify-content: start;
    }
}