/*
    blocks are like container but reajusted
*/
/*
    ----------------------------------------
    [                 A                    ]
    ----------------------------------------
*/
.block {
    display: grid;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 1fr;
    box-sizing: border-box;
    margin: 0;
    flex-grow: 1;
}
/*
    ----------------------------------------
        [             A                ]
    ----------------------------------------
*/
.block-middle {
    margin-left: 12.5%;
    margin-right: 12.5%;
}
/*
    ----------------------------------------
    [                 A                ]
    ----------------------------------------
*/
.block-sm {
    width: 90%;
}
/*
    ----------------------------------------
    [                 A                  ]
    ----------------------------------------
*/
.block-md {
    width: 95%;
}
/*
    ----------------------------------------
    [                 A                    ]
    ----------------------------------------
*/
.block-lg {
    width: 100%;
}
/*
    ----------------------------------------
    [    A   ][    B   ][   C    ][    D   ]
    ----------------------------------------
*/
.block-4 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: auto auto auto auto;
}
/*
    ----------------------------------------
    [    A     ][     B      ][      C     ]
    ----------------------------------------
*/
.block-3 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: auto auto auto;
}
/*
    ----------------------------------------
    [        A        ][        B          ]
    ----------------------------------------
*/
.block-2 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: auto auto;
}

.block-2-05 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 5% auto;
}

.block-2-10 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 10% auto;
}
.block-2-15 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 15% auto;
}
/*
    ----------------------------------------
    [    A     ][               B          ]
    ----------------------------------------
*/
.block-2-20 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 20% auto;
}
.block-2-25 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 25% auto;
}
/*
    ----------------------------------------
    [    A       ][             B          ]
    ----------------------------------------
*/
.block-2-30 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 30% auto;
}
/*
    ----------------------------------------
    [    A         ][           B          ]
    ----------------------------------------
*/
.block-2-35 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 35% auto;
}
.block-2-40 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 40% auto;
}
.block-2-45 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 45% auto;
}
/*
    ----------------------------------------
    [        A        ][        B          ]
    ----------------------------------------
*/
.block-2-50 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 50% 50%;
}
.block-2-55 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 55% 45%;
}
.block-2-60 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 60% 40%;
}
.block-2-65 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 65% 35%;
}
/*
    ----------------------------------------
    [               A          ][    B     ]
    ----------------------------------------
*/
.block-2-70 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 70% auto;
}
/*
    ----------------------------------------
    [               A          ][    B     ]
    ----------------------------------------
*/
.block-2-75 {
    display: grid;
    object-fit: scale-down;
    width: 100%;
    min-height: 1rem;
    grid-template-columns: 75% auto;
}

/* Phone styles (screen width up to 480px) */
@media screen and (max-width: 480px) {
    /*
    ----------------------------------------
    [                 A                    ]
    ----------------------------------------
*/
    .block {
        display: block;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
    }
    /*
    ----------------------------------------
        [             A                ]
    ----------------------------------------
*/
    .block-middle {
        margin-left: 12.5%;
        margin-right: 12.5%;
    }
    /*
    ----------------------------------------
    [                 A                ]
    ----------------------------------------
*/
    .block-sm {
        width: 90%;
    }
    /*
    ----------------------------------------
    [                 A                  ]
    ----------------------------------------
*/
    .block-md {
        width: 95%;
    }
    /*
    ----------------------------------------
    [                 A                    ]
    ----------------------------------------
*/
    .block-lg {
        width: 100%;
    }
    /*
    ----------------------------------------
    [    A   ][    B   ][   C    ][    D   ]
    ----------------------------------------
*/
    .block-4 {
        display: grid;
        grid-template-columns: 1fr;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
    }
    /*
    ----------------------------------------
    [    A     ][     B      ][      C     ]
    ----------------------------------------
*/
    .block-3 {
        display: grid;
        grid-template-columns: 1fr;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
    }
    /*
    ----------------------------------------
    [        A        ][        B          ]
    ----------------------------------------
*/
    .block-2 {
        display: grid;
        object-fit: scale-down;
        grid-template-columns: 1fr;
        width: 100%;
        min-height: 1rem;
    }
    /*
    ----------------------------------------
    [    A     ][               B          ]
    ----------------------------------------
*/
    .block-2-10 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 1fr;
    }
    /*
    ----------------------------------------
    [    A     ][               B          ]
    ----------------------------------------
*/
    .block-2-15 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 1fr;
    }
    /*
    ----------------------------------------
    [    A     ][               B          ]
    ----------------------------------------
*/
    .block-2-20 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 1fr;
    }
    /*
    ----------------------------------------
    [    A     ][               B          ]
    ----------------------------------------
*/
    .block-2-25 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 1fr;
    }
    /*
    ----------------------------------------
    [    A       ][             B          ]
    ----------------------------------------
*/
    .block-2-30 {
        display: grid;
        grid-template-columns: 1fr;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
    }

    .block-2-35 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 35% auto;
    }

    .block-2-40 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 40% auto;
    }

    .block-2-45 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 45% auto;
    }
    /*
    ----------------------------------------
    [        A        ][        B          ]
    ----------------------------------------
*/
    .block-2-50 {
        display: grid;
        grid-template-columns: 1fr;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
    }
    /*
    ----------------------------------------
    [               A          ][    B     ]
    ----------------------------------------
*/
    .block-2-70 {
        display: grid;
        grid-template-columns: 1fr;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
    }
    /*
    ----------------------------------------
    [               A          ][    B     ]
    ----------------------------------------
*/
    .block-2-75 {
        display: grid;
        grid-template-columns: 1fr;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
    }
}

/* Tablet styles (screen width between 768px and 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

    /*
    ----------------------------------------
    [                 A                    ]
    ----------------------------------------
*/
    .block {
        display: grid;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 1fr;
        box-sizing: border-box;
        margin: 0;
    }
    /*
    ----------------------------------------
        [             A                ]
    ----------------------------------------
*/
    .block-middle {
        margin-left: 12.5%;
        margin-right: 12.5%;
    }
    /*
    ----------------------------------------
    [                 A                ]
    ----------------------------------------
*/
    .block-sm {
        width: 90%;
    }
    /*
    ----------------------------------------
    [                 A                  ]
    ----------------------------------------
*/
    .block-md {
        width: 95%;
    }
    /*
    ----------------------------------------
    [                 A                    ]
    ----------------------------------------
*/
    .block-lg {
        width: 100%;
    }
    /*
    ----------------------------------------
    [    A   ][    B   ][   C    ][    D   ]
    ----------------------------------------
*/
    .block-4 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: auto auto auto auto;
    }
    /*
    ----------------------------------------
    [    A     ][     B      ][      C     ]
    ----------------------------------------
*/
    .block-3 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: auto auto auto;
    }
    /*
    ----------------------------------------
    [        A        ][        B          ]
    ----------------------------------------
*/
    .block-2 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: auto auto;
    }
    /*
    ----------------------------------------
    [    A     ][               B          ]
    ----------------------------------------
*/
    .block-2-25 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 25% auto;
    }
    /*
    ----------------------------------------
    [    A       ][             B          ]
    ----------------------------------------
*/
    .block-2-30 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 30% auto;
    }
    .block-2-35 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 35% auto;
    }

    .block-2-40 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 40% auto;
    }

    .block-2-45 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 45% auto;
    }
    /*
    ----------------------------------------
    [        A        ][        B          ]
    ----------------------------------------
*/
    .block-2-50 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 50% 50%;
    }
    /*
    ----------------------------------------
    [               A          ][    B     ]
    ----------------------------------------
*/
    .block-2-70 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 70% auto;
    }
    /*
    ----------------------------------------
    [               A          ][    B     ]
    ----------------------------------------
*/
    .block-2-75 {
        display: grid;
        object-fit: scale-down;
        width: 100%;
        min-height: 1rem;
        grid-template-columns: 75% auto;
    }
}
/* Phone styles (screen width up to 480px) */
@media screen and (max-width: 480px) {
}