@import url('variables.css');

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-image-placeholder);
    border-radius: var(--common-border-radius-px30);
    padding: var(--standard-padding20);
    margin:var(--common-margin-0) auto;
    gap: 20px;
}

.image-grid{
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr;
    list-style: none;
    padding: var(--standard-padding0);
    margin: var(--common-margin-0);
}

.image-placeholder-container {
    background-color: var(--color-image-placeholder);
    border-radius: var(--common-border-radius-px10);
    width: 100%;
    max-width: 200px;
    height: auto;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-image-placeholder);
    border-radius: var(--common-border-radius-px30);
    padding: var(--standard-padding20);
    margin:var(--common-margin-0) auto;
    gap: 20px;
}

.image-placeholder-container:hover {
    background-color: var(--red-color);
    transform: translateY(-10px);
}

li {
  list-style: none;
}