.mosaico {
    width: 100%;
}

.mosaico-container {
    max-width: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    position: relative;
}

.mosaico-container .item {
    height: 240px;
}

.mosaico-container .img-1 {
    background-image: url(../assets/img/novo-mosaico-1.jpg);
    grid-column: span 1;
    grid-row: span 1;
}

.mosaico-container .img-2 {
    background-image: url(../assets/img/novo-mosaico-2.jpg);
    grid-column: span 1;
    grid-row: span 1;
}

.mosaico-container .img-3 {
    background-image: url(../assets/img/novo-mosaico-3.jpg);
    grid-column: span 1;
    grid-row: span 2;
    height: auto;
}

.mosaico-container .img-4 {
    background-image: url(../assets/img/novo-mosaico-4.jpg);
    grid-column: span 1;
    grid-row: span 1;
}

.mosaico-container .img-5 {
    background-image: url(../assets/img/novo-mosaico-5.jpg);
    grid-column: span 1;
    grid-row: span 1;
}

.mosaico-container .img-6 {
    background-image: url(../assets/img/novo-mosaico-6.jpg);
    grid-column: span 1;
    grid-row: span 2;
    height: auto;
}

.mosaico-container .img-7 {
    background-image: url(../assets/img/novo-mosaico-7.jpg);
    grid-column: span 2;
    grid-row: span 1;
    width: auto;
}

.mosaico-container .img-8 {
    background-image: url(../assets/img/novo-mosaico-8.jpg);
    grid-column: span 1;
    grid-row: span 1;
}

.mosaico-container .img-9 {
    background-image: url(../assets/img/novo-mosaico-9.jpg);
    grid-column: span 1;
    grid-row: span 1;
}

.mosaico-container .img-10 {
    background-image: url(../assets/img/novo-mosaico-10.jpg);
    grid-column: span 1;
    grid-row: span 2;
    height: auto;
}

.mosaico-container .img-11 {
    background-image: url(../assets/img/novo-mosaico-11.jpg);
    grid-column: span 1;
    grid-row: span 1;
}

.mosaico-container .img-12 {
    background-image: url(../assets/img/novo-mosaico-12.jpg);
    grid-column: span 1;
    grid-row: span 1;
}

.mosaico-container .img-13 {
    background-image: url(../assets/img/novo-mosaico-13.jpg);
    grid-column: span 1;
    grid-row: span 2;
    height: auto;
}

.mosaico-container .img-14 {
    background-image: url(../assets/img/novo-mosaico-14.jpg);
    grid-column: span 1;
    grid-row: span 1;
}

.mosaico-container .img-15 {
    background-image: url(../assets/img/novo-mosaico-15.jpg);
    grid-column: span 1;
    grid-row: span 1;
}

.mosaico-container .img-16 {
    background-image: url(../assets/img/novo-mosaico-16.jpg);
    grid-column: span 1;
    grid-row: span 1;
}

.mosaico-container .img-17 {
    background-image: url(../assets/img/novo-mosaico-17.jpg);
    grid-column: span 1;
    grid-row: span 1;
}

.mosaico-container .img-18 {
    background-image: url(../assets/img/novo-mosaico-18.jpg);
    grid-column: span 1;
    grid-row: span 1;
}

.mosaico-container .img-19 {
    background-image: url(../assets/img/novo-mosaico-19.jpg);
    grid-column: span 1;
    grid-row: span 1;
}

/* festcria */


.mosaico-festcria .mosaico-container .img-1 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-1.jpg);
}

.mosaico-festcria .mosaico-container .img-2 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-2.jpg);
}

.mosaico-festcria .mosaico-container .img-3 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-3.jpg);
}

.mosaico-festcria .mosaico-container .img-4 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-4.jpg);
}

.mosaico-festcria .mosaico-container .img-5 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-5.jpg);
}

.mosaico-festcria .mosaico-container .img-6 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-6.jpg);
}

.mosaico-festcria .mosaico-container .img-7 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-7.jpg);
}

.mosaico-festcria .mosaico-container .img-8 {
    background-image: url(../assets/img/mosaico/festcria20202.jpg);
}

.mosaico-festcria .mosaico-container .img-9 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-8.jpg);
}

.mosaico-festcria .mosaico-container .img-10 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-9.jpg);
}

.mosaico-festcria .mosaico-container .img-11 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-10.jpg);
}

.mosaico-festcria .mosaico-container .img-12 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-11.jpg);
}

.mosaico-festcria .mosaico-container .img-13 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-12.jpg);
}

.mosaico-festcria .mosaico-container .img-14 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-13.jpg);
}

.mosaico-festcria .mosaico-container .img-15 {
    background-image: url(../assets/img/mosaico/novo-mosaico-15.jpg);
}

.mosaico-festcria .mosaico-container .img-16 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-14.jpg);
}

.mosaico-festcria .mosaico-container .img-17 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-15.jpg);
}

.mosaico-festcria .mosaico-container .img-18 {
    background-image: url(../assets/img/mosaico/mosaico-festcria-16.jpg);
    grid-column: span 2;
}

.mosaico-festcria .mosaico-container .img-19 {
    display: none;
}

/* texto mobile e tablet */

.mosaico-texto-mobile-tablet {
  display: flex;
  justify-content: center;
}

.mosaico-texto-mobile-tablet .container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.mosaico-texto-mobile-tablet .container p {
  color: black;
}

/* texto mosaico desktop (overlay) */

.mosaico-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 5;
}

.mosaico-texto {
    position: absolute;
    bottom: 40px;
    left: 40px;
    width: 700px;

    color: var(--off-white-100);

    display: flex;
    flex-direction: column;
    gap: 24px;

    opacity: 0;
    transition: opacity .3s ease;
    z-index: 6;
}

.mosaico-container:hover .mosaico-overlay,
.mosaico-container:hover .mosaico-texto {
    opacity: 1;
}