.home-link{
    display:none;
    margin: 10px 0 0 0;
    font-family: "Oswald", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    width: 100%;
    text-align: center;
    color: #DD1367;
    font-size: 20px;
    text-decoration: underline;
  }
.container {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 equal-width columns */
    gap: 10px; /* Adjust spacing between items */
    width: 80vw;
    margin: 30px auto;
    place-items: center;
  }
.container-item{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.container-item a{
    width: 100%;
    height: 100%;
}
.container-item img{
    width: 100%;
    height: 100%;
}
.container-item svg{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0 auto;
}


.default-svg circle{
    stroke: #DD1367;
}
.default-svg path, .back-home-svg path{
    fill:#DD1367;
}
.selected-svg path{
    fill:white;
}
.selected-svg circle{
    fill: #DD1367;
    stroke: #DD1367;
}
.container-item a:hover .back-home-svg>circle{
    stroke: #DD1367;
}
.container-item a:hover .default-svg>circle{
    fill: #E3E3E3;
}
.poster{
    display:block;
    width:80vw;
    margin: 0 auto;
    margin-bottom: 30px;
    border: 4px solid #DD1367;
}

@media (min-width: 1150px) {
    .container{width: 1150px;}
    .poster{width: 900px;}
}
@media (max-width: 1150px) {
    .container{width: 90%;}
}
  /* Smaller screens: break into 3 columns */
  @media (max-width: 750px) {
    .back-home-svg-container{
        display:none;
    }
    .home-link{
        display: block;
    }
    .container {
      margin: 25px auto;
      width: 100%;
      max-width: 380px;
      grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
      grid-auto-rows: auto;
    }
    .poster{
        width: 95vw
    }
  }