.section.images {padding-bottom: 6.1rem;background: var(--black); } .section.images > .container {padding-top: 0.25rem;padding-bottom: 0.7rem; } .section.images > .container h1, .section.images > .container .h1 {margin-bottom: 2.5rem;max-width: 47.5rem;margin-left: auto;margin-right: auto; } .section.images > .container .row-card {padding-top: 1.45rem;margin: 0;display: grid;align-items: stretch;gap: 1.8rem;grid-template-areas: "item-1" "item-2" "item-3" "item-4" "item-5"; } @media (min-width: 576px) {.section.images > .container .row-card {grid-template-areas: "item-1 item-2" "item-1 item-3" "item-4 item-5";} } @media (min-width: 992px) {.section.images > .container .row-card {grid-template-areas: "item-1 item-2 item-3" "item-1 item-4 item-5";} } .section.images > .container .row-card .col-card {padding: 0;max-width: none;aspect-ratio: 454/272; } .section.images > .container .row-card .col-card.item-1 {grid-area: item-1;aspect-ratio: 454/580; } .section.images > .container .row-card .col-card.item-2 {grid-area: item-2; } .section.images > .container .row-card .col-card.item-3 {grid-area: item-3; } .section.images > .container .row-card .col-card.item-4 {grid-area: item-4; } .section.images > .container .row-card .col-card.item-5 {grid-area: item-5; } .section.images.images-flex > .container .row-card {display: flex;flex-wrap: wrap; } .section.images.images-flex > .container .row-card .col-card {flex: 0 0 100%;max-width: 100%; } @media (min-width: 768px) {.section.images.images-flex > .container .row-card .col-card {flex: 0 0 calc((100% - 1.8rem) / 2);max-width: calc((100% - 1.8rem) / 2);} } @media (min-width: 992px) {.section.images.images-flex > .container .row-card .col-card {flex: 0 0 calc((100% - 3.6rem) / 3);max-width: calc((100% - 3.6rem) / 3);} } .section.images.images-flex > .container .row-card .col-card.item-1 {aspect-ratio: 454/272; } .modal.modal-images {overflow: hidden; } .modal.modal-images .modal-dialog {max-width: calc(100vw - 1.8rem);max-height: calc(100vh - 1.8rem); } .modal.modal-images .modal-content, .modal.modal-images .modal-body, .modal.modal-images picture {max-width: calc(100vw - 1.8rem);max-height: calc(100vh - 1.8rem); } .modal.modal-images .modal-content {position: relative; } .modal.modal-images .modal-header {top: 0.4rem;right: 0.4rem; } .modal.modal-images .modal-body {display: flex;align-items: center;justify-content: center;padding: 0;overflow: hidden; } .modal.modal-images picture {display: flex;align-items: center;justify-content: center; } .modal.modal-images .img-fluid {width: auto;max-width: calc(100vw - 1.8rem);max-height: calc(100vh - 1.8rem);object-fit: contain; }