.grid-gallery {
position: absolute;
top: 0;
width: 100%;
overflow: hidden;
}
.carousel-btns{
position:relative;
}
.grid-gallery-row {
display: flex;
justify-content: space-around;
}
.grid-gallery-item {
display: flex;
align-self: center;
margin: 10px;
}
.dimensions{
display: flex;
align-items: center;
justify-content: center;
height:70vh;
}
.carousel-item img {
width: auto;
margin: auto;
max-height:70vh;
}
.invisible {
opacity: 0;
}
.fade-in {
-webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
z-index: 100;
}
.fade-out {
-webkit-animation: fade-out 1s ease-out both;
animation: fade-out 1s ease-out both;
z-index: 0;
}
.grid-container {
display: grid;
position: relative;
width: max-content;
left: 50%;
grid-template-rows: auto;
grid-template-columns: 320px;
transform: translate(-50%);
}
.carousel-item-fade-in{
-webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.corousel-btn {
padding: 0;
border: none;
background: none;
}
.display-n {
display: none;
}
@-webkit-keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@media (min-width: 576px) {
.grid-container {
grid-template-columns: 320px 320px;
}
}
@media (min-width: 992px) {
.grid-container {
grid-template-columns: 320px 320px 320px;
}
}
@media (min-width: 1200px) {
.grid-container {
grid-template-columns: 320px 320px 320px 320px;
}
}