﻿.adaptblock, .adaptblock_L, .adaptblock_R {
    margin: 0;
    padding: 0;
    width: 96%;
    font-family: 'Arsenal', Calibri, Helvetica, arial, Tahoma, verdana, sans-serif;
    text-shadow: none;
    font-size: 1em;
    font-weight: lighter;
    column-gap: 6px; /* Загальна відстань між колонками */
    -moz-column-gap: 6px; /* Відстань між колонками для Firefox */
    -webkit-column-gap: 6px; /* Відстань між колонками  для Safari, Chrome и iOS */
    display: block;
}

@media only screen and (min-width: 400px) {
    .adaptblock, .adaptblock_L, .adaptblock_R { width: 96%; }
}

@media only screen and (min-width: 900px) {
    .adaptblock { width: 96%; padding: 2%; }
    .adaptblock_L { width: 46%; float: left; margin: 1%; padding: 1%; }
    .adaptblock_R { width: 46%; float: right; margin: 1%; padding: 1%; }
}

/* Елементи у вигляді плиток з наповненням */
.item {
    display: inline-block;
    box-sizing: border-box; /* Зміна алгоритму розрахунку ширини та висоти елемента */
    -moz-box-sizing: border-box; /* Для Firefox */
    -webkit-box-sizing: border-box; /* Для Safari, Chrome, iOS иAndroid */
/*    box-shadow: 2px 2px 4px 0 #ccc; */
}

/* Стилі картинок та фреймів всередині адаптивних плиток */
.item img {
    width: 100%;
    height: auto;
    margin-bottom: 4px;
}

.item a img {
    cursor: zoom-in;
}

.item h1 {
    font-family: inherit;
    text-shadow: none;
    font-size: 1.35em;
    font-weight: 500; 
    text-align: justify;
    color: #405759;
    padding: 0 10px 0 10px;
    width: 100%;
}

.item h2 {
    font-family: inherit;
    font-size: 1.35em;
    color: #405759;
    text-align: justify;
    margin: 16px 0 16px 0;
    font-weight: bold;
    overflow: hidden;
    width: 100%;
}

.item p {
    font-family: inherit;
    font-size: 1.1em;
    text-align: justify; /* Вирівнювання по ширині */
    margin: 16px 0 16px 0;
    font-weight: lighter;
    overflow: hidden;
    width: 100%;
}

.item p a {
    color: green;
    padding: 2px;
    font-weight: bold;
}

.item p a:hover {
    text-decoration: none;
    color: white;
    background: green;
}

.item h3 {
    font-family: inherit;
    text-shadow: none;
    font-size: 0.8em;
    width: 100%;
    text-align: left;
}

.item h3 a {
    text-decoration: none;
    color: green;
    padding-left: 4px;
}

.item h3 a:hover {
    text-decoration: none;
    color: white;
    background: green;
}

.item h4 {
    font-family: 'Rubik Mono One', Calibri, Helvetica, arial, Tahoma, verdana, sans-serif;
    text-shadow: none;
    font-size: 4em;
    color: #cecece;
    font-weight: bold;
    text-align: left;
    padding: 0;
    margin: 0;
}

.adaptblock, .adaptblock_L, .adaptblock_R {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
}
