@import '../../../root/css/root.css';

.photo-to-home-link_wrapper {
    margin: 0 0 50px 0;
}

/* ___photo-SECTION___ */
.photo-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 85px 0 110px 0;
}

.photo-main_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    width: 1810px;
}

@media all and (max-width: 1810px) {
    .photo-main_wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: center;
        width: 100%;
    }
}

.photo-content_wrapper {
    display: flex;
    flex-direction: column;
}

/* ___photo-items___ */
.photo-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 var(--main-indent) 0 var(--main-indent);
}

.photo-item {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background-size: cover;
    width: 650px;
    padding: var(--main-indent);
    margin: 50px 0 50px 0;
}

.photo-item:hover {
    transition: var(--transition);
    transform: scale(110%);
}

.photo-item:not(:hover) {
    transition: var(--transition-not);
    transform: none;
}

.photo-items .photo-item:only-child {
    width: 100% !important;
}

.photo-items .photo-item:only-child:hover {
    transition: var(--transition);
    transform: scale(103%);
}

.photo-items .photo-item:only-child:not(:hover) {
    transition: var(--transition-not);
    transform: none;
}

@media all and (max-width: 1100px) {
    .photo-items .photo-item:only-child {
        width: auto !important;
    }
}

.photo-item-covering {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 0;
}

.photo-item-title_wrapper {
    display: flex;
    flex-direction: column;
    margin: 0 0 60px 0;
    z-index: 1;
}

.photo-item-time {
    font-family: Exo2-Light, sans-serif;
    font-size: 32px;
    font-weight: 100;
    color: var(--white-color);
    margin: 0 0 10px 0;
    z-index: 1;
}

.photo-item-title {
    font-family: Exo2-Bold, sans-serif;
    font-size: 32px;
    font-weight: 100;
    color: var(--white-color);
    z-index: 2;
}

.photo-item-text {
    font-family: Inter-Regular, sans-serif;
    font-size: 22px;
    font-weight: 100;
    color: var(--white-color);
    margin: 0 0 70px 0;
    z-index: 1;
}

.photo-item-more {
    position: absolute;
    bottom: 45px;
    font-family: Inter-Regular, sans-serif;
    font-size: 22px;
    font-weight: 100;
    color: var(--white-color);
    text-decoration: none;
    align-self: flex-end;
    z-index: 1;
}

.photo-item:hover .photo-item-more {
    transition: var(--transition);
    font-weight: 900;
}

.photo-item:not(:hover) .photo-item-more {
    transition: var(--transition-not);
    font-weight: 100;
}

@media all and (max-width: 1610px) {
    .photo-to-home-link_wrapper {
        margin: 0 0 41px 0;
    }

    .photo-section {
        margin: 70px 0 91px 0;
    }

    .photo-item {
        width: 539px;
        margin: 41px 0 41px 0;
    }

    .photo-item-title_wrapper {
        margin: 0 0 50px 0;
    }

    .photo-item-time {
        font-size: 26px;
        margin: 0 0 8px 0;
    }

    .photo-item-title {
        font-size: 26px;
    }

    .photo-item-text {
        font-size: 18px;
        margin: 0 0 58px 0;
    }

    .photo-item-more {
        font-size: 18px;
    }
}

@media all and (max-width: 1450px) {
    .photo-to-home-link_wrapper {
        margin: 0 0 37px 0;
    }

    .photo-section {
        margin: 63px 0 82px 0;
    }

    .photo-item {
        width: 485px;
        margin: 37px 0 37px;
    }

    .photo-item-title_wrapper {
        margin: 0 0 45px 0;
    }

    .photo-item-time {
        font-size: 23px;
        margin: 0 0 7px 0;
    }

    .photo-item-title {
        font-size: 23px;
    }

    .photo-item-text {
        font-size: 16px;
        margin: 0 0 52px 0;
    }

    .photo-item-more {
        font-size: 16px;
    }
}

@media all and (max-width: 1240px) {
    .photo-to-home-link_wrapper {
        margin: 0 0 31px 0;
    }

    .photo-section {
        margin: 53px 0 70px 0;
    }

    .photo-item {
        width: 412px;
        margin: 31px 0 31px;
    }

    .photo-item-title_wrapper {
        margin: 0 0 38px 0;
    }

    .photo-item-time {
        font-size: 19px;
        margin: 0 0 6px 0;
    }

    .photo-item-title {
        font-size: 19px;
    }

    .photo-item-text {
        font-size: 13px;
        margin: 0 0 44px 0;
    }

    .photo-item-more {
        bottom: 35px;
        font-size: 13px;
    }
}

@media all and (max-width: 1100px) {
    .photo-items {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .photo-item {
        width: calc(100% - var(--main-indent)*2);
    }

    .photo-item:hover {
         transform: scale(105%);
     }
}

@media all and (max-width: 1030px) {
    .photo-section {
        margin: 30px 0 70px 0;
    }
}

@media all and (max-width: 505px) {
    .photo-section {
        margin: 10px 0 25px 0;
    }

    .photo-item-title_wrapper {
        margin: 0 0 28px 0;
    }

    .photo-item-text {
        margin: 0 0 30px 0;
    }

    .photo-item-more {
        bottom: 20px;
    }
}