/*********************************************
 * Gallery
**********************************************/
/* Grid */
.br-gallery__item-row {display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;}
@media only screen and (min-width:768px) {
    .br-gallery__item:first-child {grid-area:1 / 1 /3 / 3;}
    .br-gallery__item:nth-child(8) {grid-area:4 / 1 /5 / 3;}
    .br-gallery__item:nth-child(8) .br-gallery__item-image {aspect-ratio:577/292;}
    .br-gallery__item:nth-child(9) {grid-area:3 / 3 /5 / 5;}
}
.br-gallery__item-row:not(:last-child) {margin-bottom:16px;}

/* item */
.br-gallery__item-image {aspect-ratio:577/600; border-radius:2px;}
.br-gallery__item-image:before {background:#000; opacity:0; z-index:1; transition:opacity .3s ease;}
.br-gallery__item-image img {transition:transform .3s ease;}
.br-gallery__item-image:hover:before {opacity:.5;}
.br-gallery__item-image:hover img {transform:scale(1.05);}

/* Last row has 1 item */
.last-row-has-1-items .br-gallery__item-row:last-child .br-gallery__item:last-child {grid-area:1/1/3/5;}
.last-row-has-1-items .br-gallery__item-row:last-child .br-gallery__item:last-child .br-gallery__item-image {aspect-ratio:117/60;}

/* Last row has 2 item */
.last-row-has-2-items .br-gallery__item-row:last-child .br-gallery__item:last-child {grid-area:1/3/3/5;}

/* Last row has 3 item */
@media only screen and (min-width:768px) {
    .last-row-has-3-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(2) {grid-area:1/3/2/5;}
    .last-row-has-3-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(3) {grid-area:2/3/3/5;}
    .last-row-has-3-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(2) .br-gallery__item-image,
    .last-row-has-3-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(3) .br-gallery__item-image {aspect-ratio:577/292;}
}

/* Last row has 4 item */
@media only screen and (min-width:768px) {
    .last-row-has-4-items .br-gallery__item-row:last-child .br-gallery__item:last-child {grid-area:2/3/3/5;}
    .last-row-has-4-items .br-gallery__item-row:last-child .br-gallery__item:last-child .br-gallery__item-image {aspect-ratio:577/292;}
}

/* Last row has 6 item */
@media only screen and (min-width:768px) {
    .last-row-has-6-items .br-gallery__item-row:last-child .br-gallery__item:last-child {grid-area:3/1/5/5;}
    .last-row-has-6-items .br-gallery__item-row:last-child .br-gallery__item:last-child .br-gallery__item-image {aspect-ratio:1170/600;}
}

/* Last row has 7 item */
@media only screen and (min-width:768px) {
    .last-row-has-7-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(6) {grid-area:3/1/5/3;}
    .last-row-has-7-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(7) {grid-area:3/3/5/5;}
}

/* Last row has 8 item */
@media only screen and (min-width:768px) {
    .last-row-has-8-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(6) {grid-area:3/1/4/3;}
    .last-row-has-8-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(7) {grid-area:4/1/5/3;}
    .last-row-has-8-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(8) {grid-area:3/3/5/5;}
    .last-row-has-8-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(6) .br-gallery__item-image,
    .last-row-has-8-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(7) .br-gallery__item-image {aspect-ratio:577/292;}
    .last-row-has-8-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(8) .br-gallery__item-image {aspect-ratio:577/600;}
}


/*********************************************
 * Gallery Responsive
**********************************************/
@media only screen and (max-width:767px) {
    .br-gallery__item-row {grid-template-columns: repeat(3, 1fr);}

    /* Last row has 2 item */
    .last-row-has-2-items .br-gallery__item-row:last-child {grid-template-columns: repeat(2, 1fr);}
    .last-row-has-2-items .br-gallery__item-row:last-child .br-gallery__item:last-child {grid-area:1/1/2/2;}
    .last-row-has-2-items .br-gallery__item-row:last-child .br-gallery__item:last-child {grid-area:1/2/2/3;}

    /* Last row has 4 item */
    .last-row-has-4-items .br-gallery__item-row:last-child .br-gallery__item:last-child {grid-area:2/1/3/4;}
    .last-row-has-4-items .br-gallery__item-row:last-child .br-gallery__item:last-child .br-gallery__item-image {aspect-ratio:117/60;}

    /* Last row has 5 item */
    .last-row-has-5-items .br-gallery__item-row:last-child {grid-template-columns: repeat(6, 1fr);}
    .last-row-has-5-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(1) {grid-area:1/1/2/3;}
    .last-row-has-5-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(2) {grid-area:1/3/2/5;}
    .last-row-has-5-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(3) {grid-area:1/5/2/7;}
    .last-row-has-5-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(4) {grid-area:2/1/3/4;}
    .last-row-has-5-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(5) {grid-area:2/4/3/7;}
    .last-row-has-5-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(4) .br-gallery__item-image,
    .last-row-has-5-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(5) .br-gallery__item-image {aspect-ratio:300/201;}

    /* Last row has 7 items */
    .last-row-has-7-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(7) {grid-area:3/1/4/4;}
    .last-row-has-7-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(7) .br-gallery__item-image {aspect-ratio:300/201;}

    /* Last row has 8 items */
    .last-row-has-8-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(8) {grid-area:3/2/4/4;}
    .last-row-has-8-items .br-gallery__item-row:last-child .br-gallery__item:nth-child(8) .br-gallery__item-image {aspect-ratio:577/289;}
}
@media only screen and (max-width:480px) {
    .br-gallery__item-row {gap:10px;}
    .br-gallery__item-row:not(:last-child) {margin-bottom:10px;}
}