﻿.adaptblock {
    margin-top: 1.5em;
    padding: 0;
    font-size: .7em;
    text-align: justify;
    font-weight: lighter;
    language: ua;
    column-gap: 1.5em; /* Загальна відстань міжд колонками */
    -moz-column-gap: 1.5em; /* Відстань міжд колонками для Firefox */
    -webkit-column-gap: 1.5em; /* Відстань міжд колонками для Safari, Chrome и iOS */
}

/* Елементи у вигляді плиток з наповненням */
.item {
    letter-spacing: -0.2px;
    display: inline-block;
    padding: .5em;
    margin: .5em;
    width: 96%;
    height: auto;
    box-sizing: border-box; /* Зміни алгоритму розрахунку ширини і висоти елемента.*/
    -moz-box-sizing: border-box; /* Для Firefox */
    -webkit-box-sizing: border-box; /* Для Safari, Chrome, iOS иAndroid */
    border-bottom: 1px solid #cecece;
}

/* Стилі зображень та фреймів всередині адаптивних плиток */
.item img {
    float: left;
    margin: 0 0 1em 0;
    width: 100%;
    height: auto;
    display: block;
    cursor: default;
    border: 1px solid #f1f1f1;
    box-shadow: 2px 2px 4px 0 #9c9c9c; /* Зовнішня тінь плиток */
}

.item a img {
    cursor: zoom-in;
}

.item a {
    text-decoration: none;
    color: green;
    font-weight: bold;
}

.item a:hover {
    padding: 2px;
    text-decoration: none;
    color: white;
    background: green;
}

.item p {
    font-size: 12px;
    font-stretch: semi-condensed;
    text-align: justify; /* Вирівнювання по ширині */
    overflow: hidden;
    margin-bottom: 10px;
}

.item p a {
    color: green;
    padding: 2px;
    font-weight: bold;
}

.item p a:hover {
    text-decoration: none;
    color: white;
    background: green;
}

.item li {
    text-align: justify;
    padding: 0 0 0 2em;
}

/* Медіа-запити для різних розмірів адаптивного макету */
@media only screen and (min-width: 400px) {
    .adaptblock {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .adaptblock {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .adaptblock {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .adaptblock {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}