:root {
    --directions-container: 1200px;
    --directions-padding: 0 10px;
    --directions-element-gap: 20px;
    --directions-margin: 0 auto var(--directions-element-gap);
    --directions-header-margin: 0 0 var(--directions-element-gap);
    --directions-header-fs: 34px;
    --directions-header-fw: 400;
    --directions-cards-grid-columns: 1fr 1fr;
    --directions-card-height: 200px;
    --directions-card-border-radius: 25px;
    --directions-card-background-color: #FFFFFF;
    --directions-card-shadow-background: linear-gradient(0deg, rgba(0,0,0,0.7469362745098039) 0%, rgba(255,255,255,0) 36%);
    --directions-card-title-fw: 500;
    --directions-card-title-fs: 26px;
    --directions-card-title-padding: calc(var(--directions-element-gap) / 2) var(--directions-element-gap);
    --directions-card-transition: opacity .7s linear;
}

.directions_container_header {
    font-weight: var(--directions-header-fw);
    margin: var(--directions-header-margin);
    font-size: var(--directions-header-fs);
    text-align: center;
}

.directions_container {
    max-width: var(--directions-container);
    padding: var(--directions-padding);
    margin: var(--directions-margin);
    justify-content: center;
    box-sizing: border-box;
    flex-direction: column;
    display: flex;
    width: 100%;
}

.directions_container > .directions_table_block {
    grid-template-columns: var(--directions-cards-grid-columns);
    gap: var(--directions-element-gap);
    box-sizing: border-box;
    display: grid;
    width: 100%;
}

.directions_container > .directions_table_block > .directions_card {
    background: var(--directions-card-background-color);
    border-radius: var(--directions-card-border-radius);
    height: var(--directions-card-height);
    position: relative;
    width: 100%;
}

.directions_container > .directions_table_block > .directions_card:hover .directions_card_shadow {
    cursor: pointer;
    opacity: 1;
}

.directions_container > .directions_table_block > .directions_card > .directions_card_title {
    color: var(--directions-card-background-color);
    padding: var(--directions-card-title-padding);
    font-weight: var(--directions-card-title-fw);
    font-size: var(--directions-card-title-fs);
    position: absolute;
    margin: 0;
}

.directions_container > .directions_table_block > .directions_card > .directions_card_photo {
    background: var(--directions-card-background-color);
    border-radius: var(--directions-card-border-radius);
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.directions_container > .directions_table_block > .directions_card > .directions_card_shadow {
    background: var(--directions-card-shadow-background);
    border-radius: var(--directions-card-border-radius);
    transition: var(--directions-card-transition);
    position: absolute;
    opacity: 0;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
}

@media only screen and (max-width: 568px){
    :root {
        --directions-cards-grid-columns: 1fr;
        --directions-element-gap: 10px;
    }
}