.gallery {
	display: flex;
	flex-wrap: wrap;
	/* Flex-wrap: quebrar a linha quando um item não puder mais compactar o seu conteúdo */
	padding: 20px 20px 0 20px;
	max-width: 499px;
}

/* Flex Item */
.gallery__item {
	width: 100%;
	margin-bottom: 20px;
}

.gallery__item > img {
	display: block;
	margin: 0 auto;
	width: 100%;
	border-radius: .25rem;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .75);
}

.gallery__item > img:hover {
	cursor: pointer;
}

/* Responsive */
@media only screen and (min-width: 500px) {
	.gallery {
		max-width: 719px;
	}
	
	.gallery__item {
		width: calc((100% / 2) - 10px);
		/* Cada item terá o seu valor máximo disponível,
		divido por 2, menos 10px, cada item terá menos 10px,
		ou seja, 2 itens por linha, 10px + 10px = 20px,
		estes 20px serão usados como margin-left abaixo */
	}
	
	.gallery__item:nth-child(even) {
		margin-left: 20px;
		/* Cada item par, terá uma margem esquerda de 20px,
		os 20px foram os que sobraram da .gallery__item */
	}
}

@media only screen and (min-width: 720px) {
	.gallery {
		max-width: 100%;
		padding: 20px 20px 0 0;
		/* Agora sem padding-left */
	}
	
	.gallery__item {
		width: calc((100% / 3) - 20px);
		/* Agora que o container .gallery não possui
		mais padding-left, e os item ímpares serão os
		que ficaram na lateral esquerda, retiro 20px
		de cada item, e adiciono como margin-left
		nos ímpares abaixo */
	}
	
	.gallery__item:nth-child(odd) {
		margin-left: 20px;
		/* Cada item ímpar, terá uma
		margem esquerda de 20px */
	}
}
.whatsapp-button {
    position: fixed;
    right: 13px;
    bottom: 90px;
    transform: translate(-50%, -50%);
    background: #25D366; /*цвет кнопки*/
    border-radius: 50%;
    width: 55px; /*ширина кнопки*/
    height: 55px; /*высота кнопки*/
    color: #fff;
    text-align: center;
    line-height: 53px; /*центровка иконки в кнопке*/
    font-size: 35px; /*размер иконки*/
    z-index: 9999;
}
.whatsapp-button a {
    color: #fff;
}
.whatsapp-button:before,
.whatsapp-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #25D366; /*цвет анимированных волн от кнопки*/
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
 
.whatsapp-button:after{
    animation-delay: .5s;
}
 
@keyframes animate
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}
@media (max-width : 800px) {  
	.whatsapp-button {   
		bottom: 5px; /*отступ кнопки снизу от экрана*/
		left: 70px; /*отступ кнопки слева от экрана(right - справа)*/
	  }
	}