/*attaction-summary.css*/




.attraction-page {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-end;
  background: radial-gradient(125.18% 61.5% at 0% -7.81%, #454554 0%, rgba(23, 23, 28, 0.00) 100%), #17171C;

  margin-top: 0; /* Add this line */
}


.bop-frame-parent {
  display: flex;
  height: 320px;
  padding: 142px 96.739px 82px 97px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background: radial-gradient(195.36% 100% at 0% 0%, #17171C 15.55%, rgba(24, 24, 29, 0.00) 100%), url(./public/cover-images/bop-min.png) lightgray 50% / cover no-repeat;
background-blend-mode: multiply, normal;
box-sizing: border-box;
}


.frame-icon {
display:none;


}

.promo-icon-image {

  width: 126.261px;
  height: 96px;
  flex-shrink: 0;
  margin-top: 50px;
  
 
}



.page-description-parent{
  display: flex;
  padding: 64px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.content-description-wrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}


.about-wrapper {
  display: flex;
  padding: 8px;
  align-items: flex-start;
  gap: 8px;
  border-radius: 24px;
background: var(--ui-interactive-enabled, #36FC62);

}

.about-text{
  color: var(--ui-text-on-interactive-alert, rgba(0, 0, 0, 0.88));
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'cv06' on, 'cv05' on, 'cv03' on, 'cv04' on, 'cv09' on;
  /* Label Large */
  font-family: "Space Grotesk";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; /* 133.333% */
  letter-spacing: 0.72px;
  text-transform: uppercase;
}
.about-wrapper:hover {
  background-color: #03c92e;
}

.attraction-header-text{
  color: var(--ui-interactive-enabled, #36FC62);
  font-family: "Space Grotesk";
  font-size: 35px;
  font-style: normal;
  font-weight: 700;
  line-height: 44px; /* 125.714% */
  letter-spacing: -0.087px;
  text-transform: uppercase;
  align-self: stretch;

}
.attraction-description-text{
  color: var(--ui-text-medium-emphasis, rgba(255, 255, 255, 0.64));
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'cv05' on, 'cv03' on, 'cv06' on, 'cv04' on, 'cv09' on;
  align-self: stretch;
  /* Body Medium */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  letter-spacing: 0.08px;
}


.bop-description-image{
display: none;
}


.photo-container {
  display: flex;
  padding: 0px 16px;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  box-sizing: border-box;
}

.photo1 {
  height: auto; /* Height will adjust to the width */
  max-height: 320px; /* Maximum height of images */
  flex-grow: 1; /* Allow images to grow and fill the container space */
  flex-shrink: 1; /* Allow images to shrink if needed */
  flex-basis: 0; /* Sets the default size of an element before the remaining space is distributed */
  object-fit: contain; /* Scale images to fit their boxes, maintaining aspect ratio */
  max-width: 100%; /* Maximum width each image can take of the container */
display: initial;
object-fit: cover; /* Stretch and ignore aspect ratio */
border-radius: 24px;
}
.photo2 {
display: none;
}


.meet-the-machines-section{
  display: flex;
  padding: 48px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  align-self: stretch;

}
.machines-container{
  display: flex;
  max-width: 1664px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.meet-the-machines-heading-text{
  color: var(--ui-interactive-enabled, #36FC62);
  text-align: center;
  
  /* Headline Medium */
  font-family: "Space Grotesk";
  font-size: 35px;
  font-style: normal;
  font-weight: 700;
  line-height: 44px; /* 125.714% */
  letter-spacing: -0.087px;
}


.machine-card-container{
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 24px;
  align-self: stretch;
  flex-wrap: wrap;

}
.machine-card{
  display: flex;
  min-width: 288px;
  flex-direction: column;
  align-items: center;
  flex: 1 0 0;}



.pinball-machine1-image{
  height: auto; /* Height will adjust to the width */
  max-height: 360px; /* Maximum height of images */
  flex-grow: 1; /* Allow images to grow and fill the container space */
  flex-shrink: 1; /* Allow images to shrink if needed */
  flex-basis: 0; /* Sets the default size of an element before the remaining space is distributed */
  object-fit: contain; /* Scale images to fit their boxes, maintaining aspect ratio */
  max-width: 100%; /* Maximum width each image can take of the container */
display: initial;
object-fit: cover; /* Stretch and ignore aspect ratio */
z-index: 1;

}

.machine-card-content{

  display: flex;
  padding: 128px 16px 16px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 16px;
  background: radial-gradient(1275.34% 162.28% at 0% 0%, #454554 0%, rgba(69, 69, 84, 0.00) 100%), #2E2E38;
  margin-top: -128px;
}

.machine-name-text{
  color: var(--ui-text-high-emphasis, rgba(255, 255, 255, 0.88));

  /* Title Large */
  font-family: "Space Grotesk";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 140% */
  letter-spacing: 0.05px;
}
.machine-text{
  color: var(--ui-text-medium-emphasis, rgba(255, 255, 255, 0.64));
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'cv05' on, 'cv03' on, 'cv06' on, 'cv04' on, 'cv09' on;
  
  /* Body Medium */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  letter-spacing: 0.08px;
}


.tertiary-button{
  display: flex;
  height: 40px;
  padding: 12px 2px 12px 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;

}

.machine-button-label{
  color: var(--ui-interactive-enabled, #36FC62);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'cv05' on, 'cv06' on, 'cv09' on, 'cv04' on, 'cv03' on;
  
  /* Title Small */
  font-family: "Space Grotesk";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.035px;
}
.button-right-arrow{
  width: 20px;
  height: 20px;
}

.machine-subtitle{

  max-width: 1664px;
  align-self: stretch;
  color: var(--ui-text-high-emphasis, rgba(255, 255, 255, 0.88));
  text-align: center;
  
  /* Title Large */
  font-family: "Space Grotesk";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 140% */
  letter-spacing: 0.05px;



}


@media screen and (min-width: 479px) {

  .bop-frame-parent {
    display: flex;
    padding: 192px 47.5px 132px 48.5px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;
background-blend-mode: multiply, normal;
height:initial;
margin-top:initial;
  
  }




  .promo-icon-image {
  
    width: 257.783px;
    height: 196px;
    flex-shrink: 0;
    margin-top: 50px;
    
   
  }

.meet-the-machines-section{
  display: flex;
  padding: 64px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  align-self: stretch;

}
.machines-container{
  display: flex;
  max-width: 1664px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.meet-the-machines-heading-text{
  color: var(--ui-interactive-enabled, #36FC62);
  text-align: center;
  font-family: "Space Grotesk";
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 120% */
  letter-spacing: -0.25px;
  text-transform: uppercase;
}


.machine-card-container{
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 24px;
  align-self: stretch;
  flex-wrap: wrap;

}
.machine-card{
  display: flex;
  min-width: 345px;
  flex-direction: column;
  align-items: center;
  flex: 1 0 0;}



.pinball-machine1-image{
  height: auto; /* Height will adjust to the width */
  max-height: 360px; /* Maximum height of images */
  flex-grow: 1; /* Allow images to grow and fill the container space */
  flex-shrink: 1; /* Allow images to shrink if needed */
  flex-basis: 0; /* Sets the default size of an element before the remaining space is distributed */
  object-fit: contain; /* Scale images to fit their boxes, maintaining aspect ratio */
  max-width: 100%; /* Maximum width each image can take of the container */
display: initial;
object-fit: cover; /* Stretch and ignore aspect ratio */
z-index: 1;

}

.machine-card-content{

  display: flex;
  padding: 128px 16px 16px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 16px;
  background: radial-gradient(1275.34% 162.28% at 0% 0%, #454554 0%, rgba(69, 69, 84, 0.00) 100%), #2E2E38;
  margin-top: -128px;
}

.machine-name-text{
  color: var(--ui-text-high-emphasis, rgba(255, 255, 255, 0.88));

  /* Title Large */
  font-family: "Space Grotesk";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 140% */
  letter-spacing: 0.05px;
}
.machine-text{
  color: var(--ui-text-medium-emphasis, rgba(255, 255, 255, 0.64));
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'cv05' on, 'cv03' on, 'cv06' on, 'cv04' on, 'cv09' on;
  
  /* Body Medium */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  letter-spacing: 0.08px;
}


.tertiary-button{
  display: flex;
  height: 40px;
  padding: 12px 2px 12px 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;

}

.machine-button-label{
  color: var(--ui-interactive-enabled, #36FC62);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'cv05' on, 'cv06' on, 'cv09' on, 'cv04' on, 'cv03' on;
  
  /* Title Small */
  font-family: "Space Grotesk";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.035px;
}
.button-right-arrow{
  width: 20px;
  height: 20px;
}

.machine-subtitle{

  max-width: 1664px;
  align-self: stretch;
  color: var(--ui-text-high-emphasis, rgba(255, 255, 255, 0.88));
  text-align: center;
  
  /* Headline Small */
  font-family: "Space Grotesk";
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px; /* 128% */



}
}



@media screen and (min-width: 768px) {



  .bop-frame-parent {
    display: flex;
    padding: 192px 251.217px 132px 251px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    background: radial-gradient(195.36% 100% at 0% 0%, #17171C 15.55%, rgba(24, 24, 29, 0.00) 100%), url(./public/cover-images/bop-min.png) lightgray 50% / cover no-repeat;
  background-blend-mode: multiply, normal;
  
  }
  
  
  .frame-icon {
  display:none;
  
  
  }
  
  
  
  
  
  .page-description-parent{
    display: flex;
    max-width: 1920px;
    padding: 96px 48px;
    align-items: center;
    gap: 24px;
    align-self: stretch;
  }
  


  .photo-container {
    display: flex;
    width: 100%; /* Ensure container takes the full width of its parent */
    max-width: 1856px; /* Max width of the container */
    padding: 0 48px;
    align-items: center; /* Align items vertically */
    gap: 24px; /* Space between images */
    justify-content: center; /* Center images when they don't fill the space */
    overflow: hidden; /* Hide any overflow */
    margin: 0 auto;
  }
  
  .photo1, .photo2 {
    height: auto; /* Height will adjust to the width */
    max-height: 320px; /* Maximum height of images */
    flex-grow: 1; /* Allow images to grow and fill the container space */
    flex-shrink: 1; /* Allow images to shrink if needed */
    flex-basis: 0; /* Sets the default size of an element before the remaining space is distributed */
    object-fit: contain; /* Scale images to fit their boxes, maintaining aspect ratio */
    max-width: 50%; /* Maximum width each image can take of the container */
  display: initial;
  object-fit: cover; /* Stretch and ignore aspect ratio */
  }


  .meet-the-machines-section{
    display: flex;
    padding: 96px 48px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    align-self: stretch;
  
  }
  .machines-container{
    display: flex;
    max-width: 1664px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
  }
  
  .meet-the-machines-heading-text{
    color: var(--ui-interactive-enabled, #36FC62);
    text-align: center;
    font-family: "Space Grotesk";
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 60px; /* 120% */
    letter-spacing: -0.25px;
    text-transform: uppercase;
  }
  
  
  .machine-card-container{
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 24px;
    align-self: stretch;
    flex-wrap: wrap;
  
  }
  .machine-card{
    display: flex;
    min-width: 288px;
    flex-direction: column;
    align-items: center;
    flex: 1 0 288px; /* Adjust this to set the basis size, replacing min-width */
  height: 100%; /* Stretch to the height of the container */
  
  }
  
  
  
  .pinball-machine1-image{
    height: auto; /* Height will adjust to the width */
    max-height: 360px; /* Maximum height of images */
    flex-grow: 1; /* Allow images to grow and fill the container space */
    flex-shrink: 1; /* Allow images to shrink if needed */
    flex-basis: 0; /* Sets the default size of an element before the remaining space is distributed */
    object-fit: contain; /* Scale images to fit their boxes, maintaining aspect ratio */
    max-width: 100%; /* Maximum width each image can take of the container */
  display: initial;
  object-fit: cover; /* Stretch and ignore aspect ratio */
  z-index: 1;
  
  }
  
  .machine-card-content{
  
    display: flex;
    padding: 128px 16px 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 16px;
    background: radial-gradient(1275.34% 162.28% at 0% 0%, #454554 0%, rgba(69, 69, 84, 0.00) 100%), #2E2E38;
    margin-top: -128px;
  }
  
  .machine-name-text{
    color: var(--ui-text-high-emphasis, rgba(255, 255, 255, 0.88));

    /* Title Large */
    font-family: "Space Grotesk";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 140% */
    letter-spacing: 0.05px;
  }
  .machine-text{
    color: var(--ui-text-medium-emphasis, rgba(255, 255, 255, 0.64));
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: 'cv05' on, 'cv03' on, 'cv06' on, 'cv04' on, 'cv09' on;
    
    /* Body Medium */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.08px;
    align-self: stretch;
  }
  
  
  .tertiary-button{
    display: flex;
    height: 40px;
    padding: 12px 2px 12px 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
  
  }
  
  .machine-button-label{
    color: var(--ui-interactive-enabled, #36FC62);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: 'cv05' on, 'cv06' on, 'cv09' on, 'cv04' on, 'cv03' on;
    
    /* Title Small */
    font-family: "Space Grotesk";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.035px;
  }
  .button-right-arrow{
    width: 20px;
    height: 20px;
  }
  
  .machine-subtitle{
  
    max-width: 1664px;
    align-self: stretch;
    color: var(--ui-text-high-emphasis, rgba(255, 255, 255, 0.88));
    text-align: center;
    
    /* Headline Small */
    font-family: "Space Grotesk";
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 128% */
  
  
  
  }




  }


  
@media screen and (min-width: 991px) {


  
  
  .frame-icon {
    width: 226.127px;
    height: 111.127px;
    flex-shrink: 0;
  
  
  }
  
  
  
  
  
.page-description-parent{
  display: flex;
  flex-direction: initial;
  max-width: 1920px;
  padding: 32px 128px;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.content-description-wrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}


.about-wrapper {
  display: flex;
  padding: 8px;
  align-items: flex-start;
  gap: 8px;
  border-radius: 24px;
background: var(--ui-interactive-enabled, #36FC62);

}

.about-text{
  color: var(--ui-text-on-interactive-alert, rgba(0, 0, 0, 0.88));
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'cv06' on, 'cv05' on, 'cv03' on, 'cv04' on, 'cv09' on;
  /* Label Large */
  font-family: "Space Grotesk";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; /* 133.333% */
  letter-spacing: 0.72px;
  text-transform: uppercase;
}
.about-wrapper:hover {
  background-color: #03c92e;
}

.attraction-header-text{
  color: var(--ui-interactive-enabled, #36FC62);
  font-family: "Space Grotesk";
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 120% */
  letter-spacing: -0.25px;
  text-transform: uppercase;

}
.attraction-description-text{
  color: var(--ui-text-medium-emphasis, rgba(255, 255, 255, 0.64));
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'cv05' on, 'cv06' on, 'cv09' on, 'cv04' on, 'cv03' on;
  
  /* Body Large */
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 140% */
  letter-spacing: 0.1px;
}


.bop-description-image-wrapper{

  display: flex;
  justify-content: center;
  align-items: center;
  gap: -320px;
  flex: 1 0 0;
  align-self: stretch;

}

.bop-description-image{
  width: 364px;
  height: 603px;
  display: initial;
}

.photo-container {
  display: flex;
  padding: 0px 128px;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.photo1 {
  height: 320px;
  flex: 1 0 0;
  border-radius: 24px;
}
.photo2 {
  display: initial;
  height: 320px;
  flex: 1 0 0;
  border-radius: 24px;
}


  .meet-the-machines-section{
    display: flex;
    padding: 96px 48px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    align-self: stretch;
  
  }
  .machines-container{
    display: flex;
    max-width: 1664px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
  }
  
  .meet-the-machines-heading-text{
    color: var(--ui-interactive-enabled, #36FC62);
    text-align: center;
    font-family: "Space Grotesk";
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 60px; /* 120% */
    letter-spacing: -0.25px;
    text-transform: uppercase;
  }
  
  
  .machine-card-container{
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 24px;
    align-self: stretch;
    flex-wrap: wrap;
  
  }
  .machine-card{
    display: flex;
    min-width: 288px;
    flex-direction: column;
    align-items: center;
    flex: 1 0 288px; /* Adjust this to set the basis size, replacing min-width */
  height: 100%; /* Stretch to the height of the container */
  
  }
  
  
  
  .pinball-machine1-image{
    height: auto; /* Height will adjust to the width */
    max-height: 360px; /* Maximum height of images */
    flex-grow: 1; /* Allow images to grow and fill the container space */
    flex-shrink: 1; /* Allow images to shrink if needed */
    flex-basis: 0; /* Sets the default size of an element before the remaining space is distributed */
    object-fit: contain; /* Scale images to fit their boxes, maintaining aspect ratio */
    max-width: 100%; /* Maximum width each image can take of the container */
  display: initial;
  object-fit: cover; /* Stretch and ignore aspect ratio */
  z-index: 1;
  
  }
  
  .machine-card-content{
  
    display: flex;
    padding: 128px 16px 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 16px;
    background: radial-gradient(1275.34% 162.28% at 0% 0%, #454554 0%, rgba(69, 69, 84, 0.00) 100%), #2E2E38;
    margin-top: -128px;
  }
  
  .machine-name-text{
    color: var(--ui-text-high-emphasis, rgba(255, 255, 255, 0.88));

    /* Title Large */
    font-family: "Space Grotesk";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 140% */
    letter-spacing: 0.05px;
  }
  .machine-text{
    color: var(--ui-text-medium-emphasis, rgba(255, 255, 255, 0.64));
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: 'cv05' on, 'cv03' on, 'cv06' on, 'cv04' on, 'cv09' on;
    
    /* Body Medium */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.08px;
    align-self: stretch;
  }
  
  
  .tertiary-button{
    display: flex;
    height: 40px;
    padding: 12px 2px 12px 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
  
  }
  
  .machine-button-label{
    color: var(--ui-interactive-enabled, #36FC62);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: 'cv05' on, 'cv06' on, 'cv09' on, 'cv04' on, 'cv03' on;
    
    /* Title Small */
    font-family: "Space Grotesk";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.035px;
  }
  .button-right-arrow{
    width: 20px;
    height: 20px;
  }
  
  .machine-subtitle{
  
    max-width: 1664px;
    align-self: stretch;
    color: var(--ui-text-high-emphasis, rgba(255, 255, 255, 0.88));
    text-align: center;
    
    /* Headline Small */
    font-family: "Space Grotesk";
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 128% */
  
  
  
  }




  }