div.ens10 {

    --red: #ff0000;
    --black: #000000;
    --gray: #f0f0f0;
    --white: #ffffff;

    --box-width: 200px;
    --box-height: 110px;
    --boxes-background-color: #fcfcfc;
    --hover-bacground-color:var(--black);

    --gap: 20px;

    --width-container: calc(var(--en-website-width));
    --text-color: #ffffff;
    --text-font-family: var(--school-font-family);
    --text-font-size: clamp(15px, 1.6363vw, 18px);
    --text-background-color: var(--color1);


}


div.ens10 {
    margin: 0px auto;
    margin-bottom: 10px;
    background: url(/pics/second_row_bg.png) no-repeat;
    background-color: #FFFFFF;
    background-size: 733px auto;
    background-position: 3%;
}

div.ens10 > div.ens10-inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: var(--width-container);
    margin: 0 auto;
    gap: var(--gap);
    padding: 35px 0;
    row-gap: 15px;
}

div.ens10 > div.ens10-inner-container > a {
    width: var(--box-width);
    height: var(--box-height);
    background: var(--boxes-background-color);
    color: #ffffff;
    position: relative;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: grid;
    place-items: center center;
    grid-template-rows: 1fr 2fr;
    gap: 0px;
    border: 1px solid var(--red3);
}

div.ens10 > div.ens10-inner-container > a::before {
    position: absolute;
    left: 50%;
    bottom: -6px;
    margin: 0px auto;
    content: "";
    width: 12px;
    height: 12px;
    background: var(--black);
    transition: all 0.5s ease-in-out 0s;
    transform: translateX(-50%);
}
div.ens10 > div.ens10-inner-container > a:hover::before {
    background: var(--red3);
    bottom: 12px;
}

div.ens10 > div.ens10-inner-container > a:hover,
div.ens10 > div.ens10-inner-container > a:active {
    background: var(--hover-bacground-color);
    text-decoration: none !important;

}

div.ens10 > div.ens10-inner-container > a:hover > h2,
div.ens10 > div.ens10-inner-container > a:hover > i {
    color: #fff !important;
    transform: translateY(-6px);
    text-decoration: none !important;
}

div.ens10 > div.ens10-inner-container > a:hover::after,
div.ens10 > div.ens10-inner-container > a:focus::after {
    /* opacity: 1;
     width: 100%;*/
}

div.ens10 > div.ens10-inner-container > a > i {
    color: var(--red3) !important;
    transition: all 0.5s ease-in-out 0s;
}


div.ens10 > div.ens10-inner-container > a > h2 {
    color: var(--black);
    font-size: 15px;
    font-weight: 600;
    line-height: 1rem;
    text-align: center;
    display: flex;
    align-items: baseline;
    justify-content: center;
    width: 100%;
    height: 100%;
    /*min-height: 98px;*/
    padding: 11px 34px;
    box-sizing: border-box;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.5s ease-in-out 0s;
    font-family: Oswald, sans-serif !important;
}


div.ens10 > div.ens10-inner-container > a > i {
    position: relative;
    height: 55%;
    object-fit: contain;
    justify-content: center;
    min-height: 33%;
    align-self: flex-end;
}

@media screen and (max-width: 750px) {
    div.ens10 {
        margin: 50px auto;
    }

    div.ens10 > div.ens10-inner-container {
        gap: 10px;
        padding: 0 5%;
    }
}

@media screen and (max-width: 1000px) {

    div.ens10 {
        background-size: auto;
    }
}

@media screen and (max-width: 600px) {

    div.ens10 {
        background-size: 300% auto;
        background-position: 8%;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    div.ens10 > div.ens10-inner-container > a {
        width: calc(50% - 10px);
    }


}

@media screen and (max-width: 450px) {

    div.ens10 > div.ens10-inner-container > a:hover::before {
        background: var(--red3);
        bottom: 3px;
    }


}