.info-grid {


    display: grid;


    grid-template-columns: repeat(2, 1fr);


}





.info-grid-col {


    display: grid;


    grid-template-columns: repeat(2, 1fr);


}





.info-grid-col:nth-child(1) .info-card {


    border-right-width: 1px;


    border-bottom-width: 1px;


}





.info-grid-col:nth-child(1) .info-card:last-child {


    border-bottom-width: 0;


}





.info-grid-col:nth-child(2) .info-card:nth-child(1) {


    border-bottom-width: 1px;


}





.info-grid-col:nth-child(2) .info-card:last-child {


    border-left-width: 1px;


}





.info-cells {


    display: grid;


    grid-template-columns: repeat(3, 1fr);


}





.info-card {


    display: flex;


    position: relative;


    padding: 50px;


    /* transition: var(--def-transition); */


    border: 0;


    border-style: solid;


    border-color: var(--acc-l-line-green);


    isolation: isolate;


    flex-flow: column;


}





.info-card.wide {


    grid-column: 1/-1;


}





.info-card:before {


    content: "";


    position: absolute;


    top: 10px;


    left: 10px;


    right: 10px;


    bottom: 10px;


    background-color: var(--acc-d-green);


    border-radius: 30px;


    /* transition: var(--def-transition); */


    opacity: 0;


    z-index: var(--zi-bg);


}





.info-card-link {


    position: absolute;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    z-index: var(--zi-2);


}





.info-card-title {


    color: var(--clr-black);


    /* transition: var(--def-transition); */


}





.info-card-text {


    margin-block: 20px;


    font-size: 16px;


    font-weight: 400;


    line-height: 1.5em;


    letter-spacing: 0.03em;


    color: var(--clr-d-gray);


}





.info-card-media {


    display: grid;


    margin-top: auto;


    padding-top: var(--tb-val-s);


}





.info-card-media > * {


    width: 100%;


    grid-area: 1/-1;


}





.info-card-media-img {


    z-index: var(--zi-1);


}





@media screen and (min-width: 553px) {


    .info-cells .info-card {


        border-right-width: 1px;


    }


}





@media screen and (min-width: 1025px) {


    .info-cells .info-card:nth-child(3n + 3) {


        border-right-width: 0;


    }





    .info-cells .info-card:nth-child(n + 4) {


        border-top-width: 1px;


    }


}





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


    .info-card {


        padding: 40px;


    }





    .info-card-text {


        font-size: 14px;


    }


}





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


    .info-grid .info-card {


        padding: 20px 10px;


    }





    .info-grid .info-card-title {


        padding-bottom: 20px;


    }





    .info-grid .info-card-text {


        display: none;


    }





    .info-grid .info-card-btn {


        margin-top: auto;


    }





    .info-grid .info-card-media-img,


    .info-grid .info-card-media-bg {


        max-height: 105px;


    }


}





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


    .info-grid {


        margin-inline: auto;


        grid-template-columns: 1fr;


        max-width: 682px;


    }





    .info-grid-col:nth-child(1) .info-card:nth-child(2) {


        border-right-width: 0;


    }





    .info-grid-col:nth-child(1) .info-card:last-child {


        border-right-width: 0;


        border-bottom-width: 1px;


    }





    .info-grid-col:nth-child(2) .info-card:nth-child(1) {


        border-top-width: 1px;


        border-bottom-width: 0;


        order: 1;


    }





    .info-grid .info-card {


        padding: 16px 8px;


    }





    .info-grid .info-card-title {


        padding-bottom: 16px;


    }





    .info-grid .info-card-title br {


        display: none;


    }





    .info-grid .info-card-media-img,


    .info-grid .info-card-media-bg {


        max-height: 100%;


    }





    .info-cells {


        grid-template-columns: repeat(2, 1fr);


    }





    .info-card {


        padding: 32px 8px;


    }





    .info-card-text {


        margin-block: 16px;


        font-size: 12px;


    }


}





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


    .info-grid {


        max-width: 512px;


    }


}





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


    .info-grid .info-card-media {


        padding-top: 24px;


    }





    .info-cells {


        grid-template-columns: 1fr;


    }





    .info-cells .info-card:first-child {


        padding-top: 0;


    }





    .info-cells .info-card:not(:first-child) {


        border-top-width: 1px;


    }





    .info-card {


        padding-inline: 0;


    }





    .info-card-media {


        padding-top: 8px;


    }


}





@media screen and (min-width: 553px) and (max-width: 1024px) {


    .info-cells .info-card:nth-child(1),


    .info-cells .info-card:nth-child(2) {


        padding-top: 0;


    }





    .info-cells .info-card:nth-last-child(1),


    .info-cells .info-card:nth-last-child(2) {


        padding-bottom: 0;


    }





    .info-cells .info-card:nth-child(even) {


        border-right-width: 0;


    }





    .info-cells .info-card:nth-child(n + 3) {


        border-top-width: 1px;


    }


}





@media (hover: hover) {


    .info-grid .info-card-text,


    .info-grid .info-card-btn {


        /* transition: var(--def-transition); */


        opacity: 0;


    }





    .info-card:hover,


    .info-card:focus-within {


        color: var(--clr-white);


    }





    .info-card:hover:before,


    .info-card:focus-within:before {


        opacity: 1;


    }





    .info-card:hover .info-card-text,


    .info-card:hover .info-card-btn,


    .info-card:hover .info-card-media-bg,


    .info-card:focus-within .info-card-text,


    .info-card:focus-within .info-card-btn,


    .info-card:focus-within .info-card-media-bg {


        opacity: 1;


    }





    .info-card:hover .info-card-title,


    .info-card:hover .info-card-text,


    .info-card:hover .info-card-btn,


    .info-card:focus-within .info-card-title,


    .info-card:focus-within .info-card-text,


    .info-card:focus-within .info-card-btn {


        color: var(--clr-white);


    }





    .info-card:hover .info-card-btn:after,


    .info-card:focus-within .info-card-btn:after {


        background-color: var(--clr-white);


    }





    .info-card-media-bg {


        /* transition: var(--def-transition); */


        opacity: 0;


    }


}