* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    /* outline: 1px solid red; */
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    color: #515151;
    font-family: 'Roboto', sans-serif;
    background-color: #e9f0fd;
}

img {
    display: block;
    max-width: 100%;
    object-fit: cover;
}

.container {
    width: 1110px;
    margin: 0 auto;
}


/* header section */

.header {
    background-color: #fff;
}

.header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 90px;
}

.shop-name {
    text-transform: uppercase;
    font-size: 30px;
    color: #515151;
    text-decoration: none;
}

.shop-name:first-letter {
    color: #1abc9c;
    font-weight: 900;
}

.site-navigation {
    display: flex;
    justify-content: space-between;
    width: 466px;
    list-style-type: none;
}

.site-navigation a {
    font-size: 14px;
    line-height: 11px;
    color: #515151;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
}

.site-navigation a:hover,
.site-navigation a:focus {
    color: #1abc9c;
}


/* Banner */

.banner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    background-image: url('../img/banner.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-bottom: 100px;
}

.ban-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ban-nav {
    height: 104px;
    width: 104px;
    background-color: rgba(26, 188, 156, 0.65);
    background-repeat: no-repeat;
    background-position: center;
    align-self: flex-end;
}

.ban-nav:hover,
.ban-nav:focus {
    background-color: rgba(26, 188, 156, 1);
}

.arrow-left {
    background-image: url('../img/icons/left-arrow.png');
}

.arrow-right {
    background-image: url('../img/icons/right-arrow.png');
}

.ban-text {
    color: #fff;
    text-transform: uppercase;
    font-size: 60px;
    font-weight: 900;
    line-height: 82px;
    word-spacing: -4px;
}

.ban-bot-text {
    font-size: 24px;
    font-weight: 300;
    line-height: 54px;
    word-spacing: -2px;
}


/* CONTENT */

.main {
    margin-bottom: 100px;
}

.col-title {
    font-size: 48px;
    line-height: 32px;
    text-transform: uppercase;
    text-align: center;
}

.col-title::after {
    display: block;
    width: 164px;
    height: 7px;
    background: #4ec6ab;
    content: '';
    margin: 32px auto 80px;
}

.col-gallery {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.col-gal-item {
    width: 255px;
    height: 322px;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.item-img {
    height: 322px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.item-chars {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    height: 40px;
    width: 231px;
    background: linear-gradient(to right, #323232 78%, #8c8c8c 78%);
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 32px;
    font-weight: 700;
}

.col-gal-item:hover .item-chars,
.col-gal-item:focus .item-chars {
    background: linear-gradient(to right, #1abc9c 78%, #7fd9c7 78%);
}

.item-shadow {
    position: absolute;
    width: 235px;
    height: 262px;
    background-color: rgba(0, 0, 0, 0.55);
    left: 50%;
    top: 44%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.item-buttons {
    width: 166px;
    height: 112px;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.col-gal-item:hover .item-shadow,
.col-gal-item:focus .item-shadow {
    opacity: 1;
}

.item-buttons a {
    display: block;
    width: 48px;
    height: 48px;
    border: 1px solid rgb(255, 255, 255);
    background-repeat: no-repeat;
    background-position: center;
}

.item-buttons .icon-cart {
    width: 164px;
    background-position: center;
    background-color: #323232;
}

.item-buttons a:hover,
.item-buttons a:focus {
    border: 0;
    background-color: #1abc9c;
    width: 50px;
    height: 50px;
}

.item-buttons .icon-cart:focus,
.item-buttons .icon-cart:hover {
    width: 166px;
}

.icon-like {
    background-image: url("../img/icons/like.png");
}

.icon-share {
    background-image: url("../img/icons/share.png");
}

.icon-timer {
    background-image: url("../img/icons/timer.png");
}

.icon-cart {
    background-image: url("../img/icons/cart.png");
}


/* FOOTER */

.footer {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #323232;
    color: #fff;
}

.f-text-color {
    color: #46bfa9;
}

.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}